如何使用 webpack 在 npm 包子文件夹中导入模块？

Question

假设node_modules 中有一个名为 foo 的包，我想通过 webpack 和 babel 将一个模块导入库中，例如 foo/module...

import Foo from 'foo'; 有效

import SomeOtherModule from 'foo/module'; 失败并显示以下内容：

找不到模块：错误：无法解析模块“foo/module” /Users/x/Desktop/someproject/js

这使得 webpack 看起来像是在错误的位置而不是 node_modules 寻找文件

我的 webpack.config 如下所示：

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: ['babel-polyfill','./js/script.js'],
    output: {
        path: __dirname,
        filename: './build/script.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015']
                }
            }
        ],
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        colors: true
    },
    devtool: 'source-map'

};

Answer 1

它应该适用于import 'foo/module';。它将解析文件 ./node_modules/foo/module.js 或 ./node_modules/foo/module/index.js 和 not 类似 ./node_modules/foo/node_modules/module/index.js 的东西（如果它预期）（在这种情况下，您最好通过 npm 安装模块）。

Answer 2

您可以使用package.json 中的module 属性定义自定义路径。示例：

{
  ...
  "module": "dist/mylib.min.js",
  ...
}

见What is the "module" package.json field for?