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

Posted 2023-02-22

【中文标题】使用 npm 链接符号链接反应模块以进行本地开发会出错

【英文标题】：Symlinking react modules with npm link for local development gives error

【发布时间】：2016-02-16 03:25:19

【问题描述】：

在开发我的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

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

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 一起使用，这给了我同样的错误。

【问题讨论】：

请阅读标签说明。 babel 是针对具有上述名称的 Python 库 提出的问题。

@FelixKling 我错过了那个，谢谢纠正。

【参考方案1】：

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

【讨论】：

是一个拼写错误，不过很好！但是在我的package.son 中拼写正确

您的package.son 中有拼写错误...只是在开玩笑 :D 感谢您解决了我的问题 :)

【参考方案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

【讨论】：

顶部链接好像坏了

@DmitriZaitsev 这很奇怪，他们为我工作，这些是链接：1.webpack.github.io/docs/configuration.html#module 和 2.webpack.github.io/docs/configuration.html#resolve-fallback

【参考方案3】：

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

【讨论】：

好吧，这不是我的问题，我也在本地安装了它，并确保它没有在全球安装。但是我的解决方案对我有用，没有任何问题。

【参考方案4】：

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

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

“预设”：[ “反应” ]