用于在node_modules中编译模块的Webpackconfiguration
我的webpack / babelconfiguration有问题。 我已经安装我的组件库（es6模块没有webpackconfiguration里面）作为node_module。 而在这种情况下，它不工作 – 我得到了'意外的令牌导入'错误（巴贝尔不会esp代码esp）
但是，如果我将外部文件夹链接到node_modules（npm链接./../../component-repository），那么它工作正常，没有任何错误。 我花了很多时间，仍然无法解决这个问题。
主要问题是如何在各个项目之间共享反应组分。 我的想法是将它们添加为依赖项。
编辑：如何设置webpack＆babel项目从node_modules文件夹编译ES6模块？ npm链接到兄弟文件夹的解决scheme不适用于生产。
编辑2：为什么我保持在模块es6代码的原因是，在本地环境我想npm链接兄弟文件夹与组件（我可以编辑组件，然后提交更改到他们的存储库）。 我共享3个项目之间的组件。 但在生产中，我想从git仓库自动安装它们作为依赖
本地环境的结构：
- 组件（也是独立的git仓库）
- PROJECT1
- node_modules
- 组件（从../../components链接）
- 项目2
- node_modules
- 组件（从../../components链接）
生产结构：
- PROJECT1
- node_modules
- 组件（作为从Git仓库的依赖）
后期，但我今天遇到了这个确切的情况。 对我来说，这个问题是由babel require hook造成的：
https://babeljs.io/docs/usage/require/
注：默认情况下，所有对node_modules的要求都将被忽略。
基本上，巴贝尔没有被用于任何需要指向node_modules。 这就是为什么代码工作的NPM链接模块，我猜巴贝尔跳过忽略，因为path不包含node_modules。
我可以通过改变require hook中的忽略逻辑来解决这个问题，就像这样：
require('babel-register')({ extensions: [".es6", ".es", ".jsx", ".js"], ignore: (absPath) => { if (absPath.lastIndexOf('node_modules') > absPath.indexOf('es6_module')) { return true; } else if (absPath.indexOf('es6_module') > -1) { return false; } else if (absPath.indexOf('node_modules') > -1) { return true; } return false; } });
当然，确保你的加载器有相同的逻辑：
loaders: [ { test: /\.jsx?$/, exclude: (absPath) => { if (absPath.lastIndexOf('node_modules') > absPath.indexOf('es6_module')) { return true; } else if (absPath.indexOf('es6_module') > -1) { return false; } else if (absPath.indexOf('node_modules') > -1) { return true; } return false; } loader: 'babel', query: { cacheDirectory: true, presets: ['es2015', 'react'] } }
您是否安装了es2015预设？
npm install babel-preset-es2015
第一select
loader可能看起来像这样：
loaders: [ { test: /\.jsx?$/, exclude: /bower_components/, loader: 'babel', query: { cacheDirectory: true, presets: ['es2015', 'react'] } }
这个加载器应该通过你所有的模块（但是要注意：也是通过所有的node_modules）并且编译它们。 预设的es2015正在pipe理您的ES6语法并将其转换为es5。
第二个选项
将自己的节点模块安装到自己的目录中
mkdir -p ./install/here/own_packages npm install --prefix ./install/here <package>
所以你可以在你的webpack.config中做到这一点
loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { cacheDirectory: true, presets: ['es2015', 'react'] } }
在那里，node_modules文件夹（和bower_components）内的所有文件都被忽略。 你可以使用上面的命令行在src/js/components （或任何地方）安装自己的npm模块。
许多用作依赖关系的项目在 npm发布之前确保编译成ES5。
这对于几个原因是有用的。
- 代码可以简单地通过
<script>添加到Web浏览器中，并且可以工作 - 它不会推断消费应用程序将使用的捆绑工具
实现这一目标的一种方法是在发布到npm之前将库代码通过babel。
设置时，我从React Bootstrap项目中获得灵感。 但那主要是因为我们想要构build便携式，风格化的组件。 然而，他们设置图书馆的方式是相当不错的国际海事组织。
像这样设置之后，消费应用程序的configuration非常简单，因为没有babel编译工作。 模块捆绑器（就像webpack）可以捆绑模块（就像其他node_modules依赖）。