webpack設置應用緩存

by Joanna Gaudyn

喬安娜·高登(Joanna Gaudyn)

如何使用Webpack在Rails應用程序中設置TinyMCE (How to setup TinyMCE in your Rails app using Webpack)

The popularity of using Webpack to deal with your assets in Rails is steadily increasing. Getting started is really straightforward. If you are starting a new app, you simply run rails new my_app --webpack and Rails takes care of the rest.

在Rails中使用Webpack處理資產的流行度正在穩步提高。入門非常簡單。如果您要啟動一個新應用程序，則只需運行rails new my_app --webpack ，Rails就會處理其余的工作。

Thanks to the webpacker gem, adding Webpack to your existing application is also pretty uncomplicated. You add the gem to your Gemfile, bundle, and finally install webpacker:

由于使用了webpacker gem ，將Webpack添加到現有應用程序中也相當簡單。您將gem添加到您的Gemfile中，進行捆綁，最后安裝webpacker：

gem 'webpacker', '~> 3.5'bundlebundle exec rails webpacker:install

This is pretty sweet. Now all you need to do is link your JavaScript pack and the CSS imported in it into the head of your application.html.haml:

這真是太好了。現在，您需要做的就是將您JavaScript包和其中導入CSS鏈接到application.html.haml的頭部：

<%= javascript_pack_tag 'application' %> <!-- js from app/javascript/packs/application.js -->

<%= stylesheet_pack_tag 'application' %> <!-- CSS imported via Wbpack -->

Once this is done, you are ready to write your modern JavaScript code and make use of all the great libraries out there.

完成此操作后，您就可以編寫現代JavaScript代碼，并充分利用所有出色的庫。

什么是tinyMCE？ (What is tinyMCE?)

TinyMCE is a rich text editor in the cloud. To put it simply, it’s like Word that can be implemented into your app.

TinyMCE是云中的富文本編輯器。簡而言之，就像可以在您的應用程序中實現的Word一樣。

The project I am working on uses it to let admins edit the content of the front page. Thanks to TinyMCE, it isn’t necessary to build a separate admin interface for that purpose. But the editor’s usage can be much more versatile. Think, for example, of what Wordpress or Evernote allows you to do thanks to their build in tools.

我正在研究的項目使用它來讓管理員編輯首頁的內容。感謝TinyMCE，無需為此目的構建單獨的管理界面。但是編輯器的用法可以更加通用。例如，考慮一下Wordpress或Evernote借助其內置的工具可以做什么。

通過CDN使用 (Usage via CDN)

We originally implemented the editor via CDN (e.g. linking the script in the head of our application.html.haml) like this:

我們最初是通過CDN實現編輯器的(例如，將腳本鏈接到application.html.haml的開頭)，如下所示：

!!!%html  %head    %meta ... <!-- some meta content -->    %title ... <!-- MyApp -->    = csrf_meta_tags

%script{src: 'https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=gexncjni90zx3qf0m5rr7kl8l40wd5yuly2xjza0g3kwrljt'}    = stylesheet_link_tag 'application', media: 'all'    = javascript_include_tag 'application'  %body    <!-- the usual body stuff -->

This required adding a file with our customized function in app/assets/javascript/tinyMce.js. Note that we are also using jQuery.

這需要在app/assets/javascript/tinyMce.js添加具有我們自定義功能的文件。請注意，我們也使用jQuery。

$( document ).on('turbolinks:load', function() {

tinyMCE.init({         selector: 'textarea.tinymce',             // some other settings, like height, language,         // order of buttons on your toolbar etc.             plugins: [            'table', 'lists' // whatever plugins you want to add        ]    });});

In addition to that, we had to include a translation file (which is not necessary if you’re using English in your app). For everything to display correctly in production, you’ll also need to get a free Tiny Cloud API key .

除此之外，我們還必須包含一個翻譯文件 (如果您在應用程序中使用英語，則不需要此文件 )。為了使所有內容在生產中正確顯示，您還需要獲取免費的Tiny Cloud API密鑰。

Webpack和tinyMCE (Webpack and tinyMCE)

Everything was working great for a couple of months, but we decided that it was time for the transition towards Webpack.

幾個月來一切都很好，但是我們認為是時候過渡到Webpack了。

Webpack is supposed to make your life easier and, coupled with yarn, lets you focus on the important stuff. Say you want to use package A. It so happens, that package A relies on packages B and C. And package B depends on D, E and F. Rather than spending hours figuring out what the dependencies are and installing them all individually, what you want is to say yarn add package-A, and have it figured out for you. And this is almost the case.

Webpack可以使您的生活更輕松，并且與毛線結合使用，可以使您專注于重要的事情。假設您要使用程序包A。碰巧的是，程序包A依賴于程序包B和C。而程序包B取決于D，E和F。與其花費大量時間來弄清它們之間的依賴關系，然后分別安裝它們，您要說的是yarn add package-A ，并為您解決。幾乎是這種情況。

This transition when it came to tinyMCE was way more painful than it should have been. And that’s why I decided to write this post. I hope it saves someone some time and frustration.

當涉及到tinyMCE時，這種過渡比原本應該痛苦得多。這就是為什么我決定寫這篇文章的原因。我希望它可以節省一些時間和挫敗感。

If you previously had tinyMCE implemented via CDN, you’d like to get rid of some stuff, to start clean. Remove the script link from application.html.haml. Then comment out the content of the tinyMce.js file (and the language file if you’re using one). I also decided to get rid of the jQuery dependency (in our case it meant removing gem 'jquery-rails' from the Gemfile, and in the app/assets/javascripts/application.js removing //= require jquery and replacing //= require jquery_ujs with //= require rails-ujs).

如果您以前通過CDN實現tinyMCE ，則想擺脫一些東西，開始清理。從application.html.haml刪除腳本鏈接。然后注釋掉tinyMce.js文件(如果使用的是語言文件)的內容。我還決定擺脫jQuery依賴關系(在我們的例子中，這意味著從Gemfile中刪除gem'jquery gem 'jquery-rails' ，并在app/assets/javascripts/application.js刪除//= require jquery并替換//= require jquery_ujs和//= require rails-ujs )。

Note: Proceed with caution if you have more external libraries in your project that rely on jQuery (e.g. Bootstrap or Select2). Ultimately your goal would probably be to move all of them to Webpack, but the bigger the project, the more complex that task could be, so just bear it in mind. Nothing stops you from keeping your traditional implementation parallel with the Webpack one. In that case I would still recommend commenting it out for the time of tinyMCE implementation.

注意：如果項目中有更多依賴jQuery的外部庫(例如Bootstrap或Select2)，請謹慎操作。最終，您的目標可能是將所有這些都移至Webpack，但是項目越大，任務可能越復雜，因此請記住這一點。沒有什么可以阻止您使傳統實現與Webpack保持并行。在那種情況下，我仍然建議在tinyMCE實施時將其注釋掉。

All these steps will ensure that things we’ll be implementing from now on work, and the old implementation doesn’t function as a fallback.

所有這些步驟將確保我們從現在開始將要執行的事情，并且舊的實現不會充當后備功能。

第1步。如果您想通過webpack使用jQuery (Step 1. If you want to use jQuery via webpack)

Adding jQuery through Webpack is as simple as running yarn add jquery and adding the following code to the config/webpack/environment.js:

通過Webpack添加jQuery就像運行yarn add jquery并將以下代碼添加到config/webpack/environment.js ：

const { environment } = require('@rails/webpacker')const webpack = require('webpack')environment.plugins.prepend('Provide',  new webpack.ProvidePlugin({    $: 'jquery',    jQuery: 'jquery'  }))module.exports = environment

第2步。獲取tinyMCE軟件包 (Step 2. Get the tinyMCE package)

That is also pretty straightforward: run yarn add tinymce.

這也非常簡單：運行yarn add tinymce 。

Then create a new file where we’ll place our function. I ended up with app/javascript/vendor/tinyMce.js with the following content:

然后創建一個新文件，在其中放置函數。我最終得到了app/javascript/vendor/tinyMce.js ，內容如下：

import tinymce from 'tinymce/tinymce';import 'tinymce/themes/modern/theme';import 'tinymce/plugins/table';import 'tinymce/plugins/lists';

function tinyMce() {    tinymce.init({        selector: 'textarea.tinymce',

// some other settings, like height, language,         // order of buttons on your toolbar etc.

plugins: [            'table', 'lists'        ]    });}

// if you're using a language file, you can place its content here

export { tinyMce };

步驟3.將所有內容導入到`application.js` (Step 3. Import everything to the `application.js`)

We can import our function like so:

我們可以這樣導入我們的函數：

import { tinyMce } from "../vendor/tinyMce";

and then call it:

然后調用它：

document.addEventListener(“turbolinks:load”, function () {    tinyMce(); });

As you can see, we also replaced the jQuery code with ES6.

如您所見，我們還用ES6替換了jQuery代碼。

步驟4.使tinyMCE皮膚正常工作 (Step 4. Get the tinyMCE skin to work)

If you run your webpack-dev-server and rails s you might be surprised to see that your text editor is not there. One look in the console and you’ll see the following error:

如果您運行webpack-dev-server和rails s ，可能會驚訝地發現文本編輯器不存在。在控制臺中一看，您將看到以下錯誤：

This is because tinyMCE will not work without a skin, and pulling it in through Webpack requires its explicit import. We can do this by including this line in our tinyMce.js file, right after the other import statements. The path is relative to the node_modules folder:

這是因為tinyMCE沒有皮膚就無法工作，并且通過Webpack引入它需要其顯式導入。為此，我們可以在其他import語句之后tinyMce.js在tinyMce.js文件中。該路徑是相對于node_modules文件夾的：

import ‘tinymce/skins/lightgray/skin.min.css’;

At this point you should have your editor working.

此時，您應該使編輯器正常工作。

But… if you look into the console, you might be disappointed to see that you are still getting 2 errors:

但是……如果您查看控制臺，可能會感到失望，仍然看到2個錯誤：

Don’t despair! There is an easy fix. Just add skin: false to your function tinyMce() config and it should do the trick. This will prevent the default files from loading.

別失望！有一個簡單的解決方法。只需添加skin: false到function tinyMce()配置中，它就可以解決問題。這將防止加載默認文件。

Congrats! You just got your tinyMCE up and running!

恭喜！您只需啟動并運行tinyMCE！