如何使用 NPM、Webpacker 和 Rails 安装 Quill dev 2.0？

Question

在让 Quilljs Dev 2.0 与我的 rails 项目一起工作时遇到问题。 Vanilla Quilljs 工作得很好，但是当我通过 npm 安装 quill-2.0-dev 并将其导入 Webpacker 时，我得到 Unexpected token '!'

控制台错误：

app/javascript/packs/quill-editor.js

import Quill from 'quill-2.0-dev'
export default Quill;

window.onload = () => {

const quill = new Quill('#editor', {
    modules: {
        toolbar: {
            container: '#toolbar'
        }
    },
    placeholder: 'Compose a document...',
    theme: 'snow'
});
};

package.json

  "dependencies": {
"@babel/core": "^7.11.1",
"@client-side-validations/client-side-validations": "^0.1.4",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.2-1",
"@rails/webpacker": "^4.0.7",
"boxicons": "^2.0.4",
"i": "^0.3.6",
"jquery": "^3.4.1",
"npm": "^6.14.8",
"quill-2.0-dev": "^2.0.0-dev.3",
"quill-blot-formatter": "^1.0.5",
"quill-emoji": "^0.1.7",
"turbolinks": "^5.2.0"

},

更新

当我尝试使用 require 关键字时：

const Quill = require('quill-2.0-dev');

我收到此错误：

但正如你所见，它在我的 package.json 中（上图）

Answer 1

按照此步骤可能会有所帮助

# Add package from yarn
yarn add quill-2.0-dev

# Import module in app/javascript/packs/application.js 

import Quill from 'quill-2.0-dev/core'
import Toolbar from 'quill-2.0-dev/modules/toolbar'
import Snow from 'quill-2.0-dev/themes/snow';
import Bold from 'quill-2.0-dev/formats/bold';
import Italic from 'quill-2.0-dev/formats/italic';
import Header from 'quill-2.0-dev/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});

# Init

window.onload = function() {
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
}

# In view

<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

流动的docs