通过Webpack导入节点模块时出错，“您可能需要一个适当的加载程序来处理此文件类型”

Question

我正在尝试构建一个扩展Quill编辑器的模块，并将其与我的项目集成起来。

当我试图在自定义的Quill模块中导入特定的Quill模块时，webpack抛出了一个错误：

Uncaught Error: Cannot find module "quill/core/quill"
    at webpackMissingModule (QuillLinkTooltip.js:15)
    at eval (QuillLinkTooltip.js:15)

然后随后：

./~/quill/core/quill.js
Module parse failed: /Users/path_to_my_app_folder/node_modules/quill/core/quill.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import './polyfill';
| import Delta from 'quill-delta';
| import Editor from './editor';

下面是我正在构建的自定义Quill模块(QuillLinkTooltip.js)的摘录，它会引发错误：

import Quill from 'quill/core/quill';
import { Range } from 'quill/core/selection';
import Keyboard from 'quill/modules/keyboard';
import LinkBlot from 'quill/formats/link';
import Tooltip from 'quill/ui/tooltip';

我在我的项目中使用Webpack，babel和babel es2015预置。我可以通过使用类似于import get from 'lodash/get';的东西来导入其他节点模块，如modules。

我怀疑webpack能找到这个模块，但很难解析它。以下是我的webpack.config.js文件的摘录：

module: {
    loaders: [
        {
            test: /.*\.js$/,
            loader: 'babel-loader',
            exclude: [ /node_modules/, /frontend/ ],
            query: {
                presets: [ 'babel-preset-es2015' ].map(require.resolve),
                plugins: [ 'babel-plugin-add-module-exports' ].map(require.resolve)
            }
        },

我读过https://quilljs.com/guides/adding-quill-to-your-build-pipeline/，其中提到Webback，Babel和Babel ES2015预置是必要的，所以我似乎有正确的webpack设置。但也许我遗漏了什么？

Answer 1

设法让这件事起作用了。原来，我的webpack.config.js文件将node_modules排除在babel定义之外，所以Webpack会尝试解析放置在/node_modules中的quill文件，但是无法解析它们，因为它们被排除在babel加载程序之外。

通过在我的排除语句中添加一个异常来修正它：

module: {
    loaders: [
        {
            test: /.*\.js$/,
            loader: 'babel-loader',
            exclude: [ /node_modules(?!\/quill)/, /frontend/ ],
            query: {
                presets: [ 'babel-preset-es2015' ].map(require.resolve),
                plugins: [ 'babel-plugin-add-module-exports' ].map(require.resolve)
            }
        },