webpack - 如何从另一个项目中排除 node_modules，同时仍然从那里使用 JS 组件

Question

---

更新：由于某种原因，我无法再重现该问题，但无法关闭该问题。为其他人留下更新的配置详细信息。

我有 2 个项目，一个用于 React Native，另一个用于 React。来自 React Web 项目的源文件（比如 rp1.js）正在使用来自 React Native 项目的源文件 mycommonrn.js（组件）。
问题是 mycommonrn.js 文件正在使用 NPM 模块（react-native-vector-icons）。而且我在两个中都分别安装了该模块：

• (a) 在 React Native 项目下的 node_modules 中

• (b) 在 React 项目下的 node_modules 中。

当从 React Web 项目中使用 mycommonrn.js 时，我需要从(b)中的 node_modules 中提取该 NPM 模块。但这并没有发生，而是以某种方式从(a)中拉出。

导致问题的导入语句在 mycommonrn.js 中

import Ionicons from 'react-native-vector-icons/dist/Ionicons';

我正在尝试指示 webpack babel-loader不要查看 react-native 项目中的 node_modules .. 但它不起作用......

我的应用程序使用带有 rewire 的 Create React App 设置来覆盖 CRA 强加的目录监狱。

我的配置如下，你可以看到我明确告诉 babel-loader 去“排除”给我带来麻烦的 node_modules 目录（为了便于阅读，用 ** 标记）。

由于某种原因，该明确排除不起作用。（CRA 设置不使用 .babelrc——这就是为什么我没有在问题中发布它的原因）。

提前感谢任何帮助。

     └─ 1
│        └─ oneOf
│           ├─ 0
│           │  ├─ test
│           │  │  ├─ 0
│           │  │  ├─ 1
│           │  │  ├─ 2
│           │  │  └─ 3
│           │  ├─ loader: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/url-loader/index.js
│           │  └─ options
│           │     ├─ limit: 10000
│           │     └─ name: static/media/[name].[hash:8].[ext]
│           ├─ 1
│           │  ├─ test
│           │  ├─ include
│           │  │  ├─ 0: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/src
│           │  │  ├─ 1: /home/v/devel/mine/ltproject/mob/rn.common/src/js.app
│           │  │  ├─ 2: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/app.src
│           │  │  ├─ 3: /home/v/devel/mine/ltproject/mob/rnweb/web.common/wc.src
│           │  │  └─ 4: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/react-native-vector-icons
│           │  ├─ loader: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/babel-loader/lib/index.js
│           │  ├─ options
│           │  │  ├─ babelrc: false
│           │  │  ├─ presets
│           │  │  │  └─ 0: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/babel-preset-react-app/index.js
│           │  │  └─ cacheDirectory: true
│           │  └─ **exclude: /home/v/devel/mine/ltproject/mob/rn.common/node_modules**

通过 rewire 注入的 config-overides.js（稍作更改会创建 react app webpack）

/* adds and slightly overwrites
   React Create App webpack
*/

const path = require('path');
const resolve=path.resolve;
const fs=require('fs'); 
const paths= require ('react-scripts/config/paths');

const wpmerge= require('webpack-merge');
var treeify = require('treeify');

module.exports = {

  webpack: function(baseConfig, env) {

    const config = Object.assign({}, baseConfig);


    config.resolve.alias.web_common = path.resolve('./src/wc.src');
     config.resolve.alias.app_src = path.resolve('./src/app.src');
    config.resolve.alias.rnjs_common = path.resolve('./src/js.app');


    /* get rid of facebooks plugin that causes error if something
       outside of the src folder...

       There SEEMS to be ONLY 1 plugin there,
       so insteading of removing by index, I am resetting
       array therefore there are should be NO resolve plugins
       in my webpack config
    */
    config.resolve.plugins=[];




    //find existing js formater rule
    let jsRulesJSFormaterIdx = -1;
    jsRulesJSFormaterIdx=config.module.rules.findIndex(
      (rule) =>{
        if (rule.test // rule.test is a reg expr 
            && rule.test.exec
            && rule.test.exec('./something.js')) {
          return true;
        }
      }
    );



    let oneOfIdx=1;
    let jsRulesBabelLoaderIdx = -1;
    jsRulesBabelLoaderIdx=config.module.rules[oneOfIdx].oneOf.findIndex(
      (rule) =>{
        if (rule.test // rule.test is a reg expr 
            && rule.test.exec
            && rule.test.exec('./something.js')) {
          return true;
        }
      }
    );

    const pathsToMySourcesArr=
      [paths.appSrc,
       fs.realpathSync(paths.appSrc+'/js.app'),
       fs.realpathSync(paths.appSrc+'/app.src'),
       fs.realpathSync(paths.appSrc+'/wc.src'),
       fs.realpathSync(paths.appNodeModules+'/react-native-vector-icons')
      ];

    /* various contraptions on how to exclude a particular node module path
      (I cannot get it work...)
     the include part works
     https://github.com/webpack/webpack/issues/2031
    */

    console.log(paths);

    let addtlIncludeConfig={
      include:pathsToMySourcesArr,
      /* EXCLUDE BELOW DOES NOT HELP TO EXCLUDE RN node_modules */
      exclude: fs.realpathSync(paths.appPath+'../../../../rn.common/node_modules/')
    };


    config.module
      .rules[oneOfIdx].oneOf[jsRulesBabelLoaderIdx]=
      wpmerge( config.module.rules[oneOfIdx].oneOf[jsRulesBabelLoaderIdx],
               addtlIncludeConfig);

    config.module
          .rules[jsRulesJSFormaterIdx]
          .include=pathsToMySourcesArr;


    console.log("config-overrides: the result config: ",
                treeify.asTree(config,true,false));

    return config;
  },


  }
}

标签： webpackbabel-loader