使用 npm 链接符号链接反应模块以进行本地开发会出错

Question

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

该模块公开了一个接口来创建一个React 组件。因为我使用React、jsx 和es2015，所以我在预发布阶段使用babel 转译我的模块代码，使用npm prepublish hook。

但是，当我尝试使用 webpack（即链接后）构建我的消费者应用程序时，我的包中出现错误，说明：

模块构建失败：错误：找不到预设“es2015”

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

我尝试在我的消费者应用中安装babel-preset-es2015，但随后它开始抱怨找不到babel：

找不到模块：错误：无法解析模块“babel”

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

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

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

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

• module
• consumer app

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

1. cd ~/Sites/me/react-leafbox
2. npm link
3. cd ~/Sites/me/mapp
4. npm link react-leafbox
5. npm start

构建后的堆栈跟踪：

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

也许这只是一个拼写错误，但它应该是 babel-preset-es2015 而不是 babel-preset-2015。 npm install babel-preset-es2015.

Answer 2

我找到了解决问题的方法。我在 webpack docs 中发现了这一点：

重要提示：这里的加载器是相对于资源解析的 它们适用于。这意味着它们没有相对解决 配置文件。如果您从 npm 安装了加载程序，并且 您的 node_modules 文件夹不在所有源的父文件夹中 文件，webpack 找不到加载器。您需要添加 node_modules 文件夹作为 resolveLoader.root 选项的绝对路径。 (resolveLoader: { root: path.join(__dirname, "node_modules") })

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

resolve.fallback 一个目录（或目录绝对路径数组）， webpack 应该在其中查找未在其中找到的模块 resolve.root 或 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
}

Answer 3

我遇到了这个问题，当我需要使用npm install webpack webpack-dev-server --save-dev 将它安装到我的应用程序目录时，我发现我已经全局安装了

Answer 4

我在尝试设置路由器演示时遇到了这个问题：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/01-setting-up

这里的所有解决方案都不适用于我，但是添加了一个 .babelrc 文件并将其作为内容：

{ “预设”：[ “反应” ] }