如何在使用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'

};

- glued

---

请展示 foo 模块的文件和文件夹结构。 - Dmitry Yaremenko

Answer 1

它应该可以使用import 'foo/module';正常工作。它将解析文件./node_modules/foo/module.js或./node_modules/foo/module/index.js，而不是./node_modules/foo/node_modules/module/index.js之类的内容（如果需要这样做，最好通过npm安装模块）。

- Dmitry Yaremenko

---

模块的结构为 ./node_modules/foo/module/index.js，但无法解析。 - glued

我在测试项目中进行了检查，它可以正常工作。当我将./node_modules/foo/module/index.js重命名为./node_modules/foo/module/index1.js，运行webpack时，它会显示“无法解析模块'foo/module' in /home/user/www/so-2/js”。所以，也许你的文件名有错别字？ - Dmitry Yaremenko

没错，模块foo有一个名为src的文件夹，所以使用import from foo/src/module是有效的，谢谢。 - glued

@DmitryYaremenko 有没有办法通过 import 'foo/module'; 导入一个 module.js 文件，如果文件本身的路径是 foo/src/module.js？我不想在导入时包含 src/ 子目录... - tonix

@tonix 你可以尝试添加别名：https://webpack.js.org/configuration/resolve/，类似于 foo: "foo/src"。 - Dmitry Yaremenko

Answer 2

你可以在package.json中使用module属性来定义自定义路径。例如：

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

请参见“module” package.json 字段有什么用？

- Javier S

---

Node.js 忽略（仍然忽略）顶层的“module”字段。他们似乎非常不想支持包含在 package.json 中的此附加字段。 - Lajos Mészáros