Symlinking react modules with npm link for local development 给出错误

Question

在开发我的 React npm 模块期间，我用 npm link 对它进行了 symlink 编辑。执行此操作后，程序包得到 link 正确编辑，并且还出现在消费者应用程序中 node_modules。

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

但是，当我尝试使用 webpack 构建我的消费者应用程序时（即在 link 之后）我的包中出现错误，指出：

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 并了解所有最近的更改，但是我想我遗漏了一些明显的东西，如果有人能帮助我，我将不胜感激，因为不断发布模块为了测试东西是否有效只是不好的做法。

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

这些是我link模块所遵循的步骤：

cd ~/Sites/me/react-leafbox
npm link
cd ~/Sites/me/mapp
npm link react-leafbox
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 安装 babel-preset-es2015.

Answer 2

我找到了解决问题的方法。我在 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") })

将 root 选项添加到 webpack.config.js 后，关于无法解析 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
}

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 文件并将其作为内容：

{ "presets"：[ "react" ] }

Symlinking react modules with npm link for local development 给出错误

Symlinking react modules with npm link for local development gives error

node.js

npm

reactjs

webpack

babeljs