node.js - 使用 npm 链接符号链接(symbolic link) react 模块以进行本地开发会产生错误

Question

在我的 React npm 模块的开发过程中，我将它与 npm link 符号链接(symbolic link)。完成此操作后，包会正确链接并出现在消费者应用程序 node_modules 中。

该模块公开了一个接口(interface)来创建一个 React 组件。因为我使用 React、jsx 和 es2015，所以我使用 babel 将我的模块代码转换为预发布阶段，使用 npm prepublish 钩子(Hook)。

但是，当我尝试使用 webpack 构建我的消费者应用程序时(即链接它之后)，我的包中出现错误:

Module build failed: Error: Couldn't find preset "es2015"

现在有趣的是，如果我在 npm 上发布包，然后从我的消费者应用程序的注册表中 npm install，构建它，一切正常。

我尝试在我的消费者应用程序中安装 babel-preset-es2015，但随后它开始提示找不到 babel:

Module not found: Error: Cannot resolve module 'babel'

同样，如果我从 npm 注册表安装它，一切正常，在构建过程中不会抛出任何错误。

我也试过安装babel-core、babel-cli和babel-polyfill，都无济于事。

我正在到处使用 babel v6.1.x 并且知道所有最近的更改，但是我想我遗漏了一些明显的东西，如果有人可以帮助我，我将不胜感激，因为不断发布模块以测试东西是否有效只是不好的做法。

为了完整起见，这里是代码:

• module
• consumer app

这些是我链接模块的步骤:

1. cd ~/Sites/me/react-leafbox
2. npm 链接
3. cd ~/Sites/me/mapp
4. npm 链接 react-leafbox
5. npm 开始

构建后的堆栈跟踪:

ERROR in ../react-leafbox/lib/index.js
Module build failed: Error: Couldn't find preset "es2015"
    at OptionManager.mergePresets (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:329:17)
    at OptionManager.mergeOptions (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:289:12)
    at OptionManager.addConfig (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:223:10)
    at OptionManager.findConfigs (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:366:16)
    at OptionManager.init (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:410:12)
    at File.initOptions (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transpile (/Users/daniel/Sites/me/mapp/node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (/Users/daniel/Sites/me/mapp/node_modules/babel-loader/index.js:83:14)
 @ ./src/js/components/App.jsx 2:10-34

添加额外的 babel 相关依赖项后的堆栈跟踪(我认为这不是必需的，因为它们在 react-leafbox 模块中可用):

ERROR in ../react-leafbox/lib/index.js
Module not found: Error: Cannot resolve module 'babel' in /Users/daniel/Sites/me/react-leafbox/lib
 @ ../react-leafbox/lib/index.js 8:11-39

我在 MAC OSX El Capitan v10.11.1 上使用 node v5.0.0 和 npm v3.3.6。我还尝试将 node v4.2.1 与 npm 2.14.7 一起使用，这给了我同样的错误。

Answer 1

我找到了解决问题的方法。我在 webpack docs 中发现了这个:

IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. This means they are not resolved relative the the configuration file. If you have loaders installed from npm and your node_modules folder is not in a parent folder of all source files, webpack cannot find the loader. You need to add the node_modules folder as absolute path to the resolveLoader.root option. (resolveLoader: { root: path.join(__dirname, "node_modules") })

在 webpack.config.js 添加 root 选项后，关于无法解析 babel 的错误消失了。相反，我得到了一个新的说它无法解析 react。我将它定义为对等依赖项，这让我认为当它在本地找不到它时需要回退，然后我在 docs 中找到了它:

resolve.fallback A directory (or array of directories absolute paths), in which webpack should look for modules that weren’t found in resolve.root or resolve.modulesDirectories.

我在我的消费者应用程序的 webpack.config.js 中结合了这两个选项，并且成功了!

// webpack.config.js
var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src/js/index.js'),

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "build.js"
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query:
                    {
                        presets:[ 'react', 'es2015' ]
                    }
            }
        ]
    },

    resolve: {
        extensions: [ '', '.js', '.jsx' ],
        fallback: path.join(__dirname, "node_modules")
    },


    resolveLoader: {
        root: path.join(__dirname, "node_modules")
    }
};

我希望这对遇到类似问题的人有所帮助。

Webpack ^2.5.0 更新

移除 resolveLoader 对象并将 resolve.fallback 替换为 resolve.symlinks 设置为 false:

resolve: {
    extensions: [ '', '.js', '.jsx' ],
    symlinks: false
}