用于在node_modules中编译模块的Webpack配置 [英] Webpack configuration for compiling module in node_modules

问题描述

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

I have problem with my webpack/babel configuration. I have installed my component-repository (es6 module without webpack configuration inside) as node_module. And in this situation it is not working - I got 'Unexpected token import' error (babel doesn't transpile es6 code)

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

But If I linked external folder to node_modules (npm link ./../../component-repository) then it is working correctly without any errors. I spent a lot of time on it and still can't solve this problem.

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

Main problem is how to share react components between various projects. My idea is to add them as dependency.

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

edit: How to set webpack&babel for project to compile ES6 module from node_modules folder ? Solution with npm link to sibling folder will not work for production.

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

edit2: Reason why I keep es6 code in module is that on local environment I want to npm link sibling folder with components (I can edit components and then commit changes to their repository). I share components between 3 projects. But on production I want to install them from git repository automatically as dependency

本地环境的结构：

• 组件（也是独立的git存储库）


• project1
  
  
  
  
  • node_modules
  
  
  • 组件（从../../组件链接）
  
  
  
  
  • node_modules
  
  
  • 组件（从../../组件链接）
  
  

  生产结构：

  
  
  • project1
    
    
    
    
    • node_modules
    
    
    • 组件（作为git存储库的依赖项）
    
    

    推荐答案

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

    Late post but I ran into this exact situation today. For me the problem was caused by the babel require hook:

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

    
    

    注意：按默认情况下对node_modules的所有要求都将被忽略。

    NOTE: By default all requires to node_modules will be ignored.

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

    Basically, babel was not being used for any require pointing to node_modules. This is why the code worked for npm linked modules, I am guessing babel skips the ignore because the path does not contain node_modules.

    我能够通过更改忽略require钩子中的逻辑，如下所示：

    I was able to fix this by changing the ignore logic in require hook, like so:

    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;
      }
    });
    

    当然，请确保您的装载机具有相同的逻辑：

    Of course, make sure your loader has the same logic:

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

    这篇关于用于在node_modules中编译模块的Webpack配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！