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

How to install Quill dev 2.0 with NPM, Webpacker, and Rails?

在我的 rails 项目中使用 Quilljs Dev 2.0 时遇到问题。 Vanilla Quilljs 工作得很好,但是当我通过 npm 安装 quill-2.0-dev 并将其导入 Webpacker 时,我得到了意外的令牌 '!'

控制台错误:

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(上图)

按照这一步可能会有帮助

# 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