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！