使用npm链接进行Symlinking反应模块以进行本地开发会产生错误

Question

在我的React npm模块开发期间,我用它进行了符号链接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到处都在使用,并且知道所有最近的变化,但是我想我错过了一些明显的东西,如果有人可以帮助我,我会非常感激,因为不断发布模块以测试是否有用的东西只是不好的做法.

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

• 模
• 消费者应用

以下是链接模块的步骤:

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

我使用的是node v5.0.0与npm v3.3.6上MAC OSX El Capitan v10.11.1.我也尝试过使用node v4.2.1与npm 2.14.7,这给了我同样的错误.

Answer 1

我找到了解决问题的方法.我在webpack 文档中发现了这个:

重要信息:此处的加载器相对于它们应用的资源进行了解析.这意味着它们不会相对于配置文件进行解析.如果您从npm安装了加载器并且您的node_modules文件夹不在所有源文件的父文件夹中,则webpack无法找到加载器.您需要将node_modules文件夹添加为resolveLoader.root选项的绝对路径.(resolveLoader:{root:path.join(__ dirname,"node_modules")})

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

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
}