Question

我的webpack / babel配置有问题。我已经将我的component-repository（没有webpack配置的es6模块）安装为node_module。并且在这种情况下它不起作用 - 我得到'意外的令牌导入'错误（babel没有转换es6代码）

但如果我将外部文件夹链接到node_modules（npm link ./../../component-repository），那么它正常工作，没有任何错误。我花了很多时间在它上面仍然无法解决这个问题。

主要问题是如何在各个项目之间共享反应组件。我的想法是将它们添加为依赖项。

编辑：如何设置webpack＆amp; babel项目从node_modules文件夹编译ES6模块？使用npm链接到兄弟文件夹的解决方案不适用于生产。

edit2：我在模块中保留es6代码的原因是在本地环境中我想要npm链接兄弟文件夹与组件（我可以编辑组件然后将更改提交到他们的存储库）。我在3个项目之间共享组件。但是在生产中我想自动将它们作为依赖

从git存储库中安装

本地环境的结构：

组件（也是独立的git存储库）
PROJECT1
- node_modules
- 组件（从../../组件链接）
项目2
- node_modules
- 组件（从../../组件链接）

生产结构：

PROJECT1
- node_modules
- 组件（作为git存储库的依赖）

Answer 1

发布晚了但我今天遇到了这种情况。对我来说问题是由babel需要钩子造成的：

https://babeljs.io/docs/usage/require/

注意：默认情况下，将忽略node_modules的所有要求。

基本上，babel没有被用于指向node_modules的任何需求。这就是为什么代码适用于npm链接模块的原因，我猜测babel会跳过忽略，因为路径不包含node_modules。

我能够通过更改require hook中的ignore逻辑来解决这个问题，如下所示：

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']
        }
  }

Answer 2

您是否安装了es2015预设？

npm install babel-preset-es2015

第一个选项

然后loader看起来像这样：

loaders: [
  {
    test: /\.jsx?$/,
    exclude: /bower_components/,
    loader: 'babel',
    query: {
            cacheDirectory: true,
            presets: ['es2015', 'react']
        }
  }

此加载程序现在应该遍历所有模块（但要注意：还要通过所有node_modules）并编译它们。预设的es2015正在管理您的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模块。

Answer 3

许多用作依赖项的项目确保在 npm发布之前编译为ES5 。

这有几个原因很有用。

只需将代码添加到<script>的网络浏览器中即可使用

对消费应用程序将使用的捆绑工具没有任何假设

实现此目的的一种方法是在发布到npm之前通过babel传递库代码。

设置时，我从React Bootstrap项目中获取灵感。但这主要是因为我们想要构建便携式样式组件。但是，他们设置库使用的方式非常好IMO。

在这样设置之后，消费应用程序配置非常简单，因为没有babel编译要完成。然后模块捆绑器（如webpack）可以捆绑模块（就像它对其他node_modules依赖一样）。

用于编译node_modules中

3 个答案:

第一个选项

第二选项