我试图让 Quill 在我的 React 应用程序上工作，但根据我的 webpack 配置，它会引发两个错误：
未捕获的语法错误：意外的令牌导入
或者
未捕获的 ReferenceError：React 未定义
请注意，我没有使用 react-quill 或 create-react-app。
解决第一个错误会产生另一个错误，我读到我需要在 webpack 中创建一个例外，以允许它从 quill 文件夹导入。
exclude: /node_modules/
进入
/node_modules(?!\/quill)/
现在它抛出第二个错误。
我的 webpack 配置文件：
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules(?!\/quill)/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
我正在使用 Quill 文档中的基本代码来导入所需的内容：
import React, { Component } from 'react';
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/header': Header
});
class Tutorial extends Component {
constructor(props){
super(props);
this.editor = null;
}
render(){
return (
<div className="verb-container">
<div className="editor"></div>
</div>
);
}
}
export default Tutorial;
当我只导入：
import Quill from 'quill';
或者
import Quill from 'quill/core';
如果我像这样初始化它，就会出现一个基本的编辑器：
this.editor = new Quill('.editor');
但是当我尝试导入时
import Snow from 'quill/themes/snow';
表明：
react未定义
如果我遗漏了任何重要信息，请告诉我。