Webpack在node_modules中编译模块的配置

Question

我对webpack/babel的配置有问题。我已经将我的组件存储库(没有webpack配置的es6模块)安装为node_module。在这种情况下，它不起作用--我收到了“意外令牌导入”错误(babel不传输es6代码)

但是，如果我将外部文件夹链接到node_modules (npm链接./component-存储库)，那么它是正确工作的，没有任何错误。我花了很多时间在这上面，仍然不能解决这个问题。

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

编辑:如何设置webpack&babel项目从node_modules文件夹编译node_modules模块？npm链接到同级文件夹的解决方案将不适用于生产。

edit2:我将es6代码保存在模块中的原因是，在本地环境中，我希望将npm链接到具有组件的同级文件夹(我可以编辑组件，然后提交对其存储库的更改)。我在3个项目之间共享组件。但是在生产中，我想将它们作为依赖关系自动地从git存储库中安装。

本地env的结构：

• 组件(也是独立的git存储库)
• project1
  • node_modules
  • 组件(链接自././组件)

​

• project2
  • 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中的忽略逻辑来修复这个问题，如下所示：

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。

这有几个原因是有用的。

1. 可以简单地将代码添加到带有<script>的web浏览器中，这样就可以工作了。
2. 它不假定消费应用程序将使用捆绑工具。

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

在设置时，我从反应引导项目中获得了灵感。但这主要是因为我们想要建造可移植的、有样式的组件。然而，他们建立图书馆使用的方式是相当不错的海事组织。

在像这样设置之后，使用的应用程序配置非常简单，因为没有任何babel编译要做。模块绑定器(像webpack一样)可以将模块捆绑在一起(就像对其他node_modules依赖者一样)。