通过 Webpack 导入节点模块时出错，"You may need an appropriate loader to handle this file type"

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 preset。我可以使用 import get from 'lodash/get';.

之类的东西导入其他节点模块，例如 lodash

我怀疑 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 文件从 babel-loader 定义中排除了 node_modules，所以 Webpack 会尝试解析放在 /node_modules 中的 quill 文件，但无法将它们解析为他们被排除在 babel-loader 之外。

通过向我的 exclude 语句添加例外来修复它：

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)
            }
        },

通过 Webpack 导入节点模块时出错，"You may need an appropriate loader to handle this file type"

Error importing node module through Webpack, "You may need an appropriate loader to handle this file type"

javascript

webpack

babeljs

quill