即使在排除块中指定忽略包后，babel-loader 也不会转译 node_modules 中的包 (lerna)

Question

所以我正在为我们的 React 应用程序尝试使用 lerna 的 monorepo 设计。这个想法是创建一个 repo，它将所有 React 项目作为 lerna 包以及一些在应用程序之间共享的常见 modules/components。

现在所有这些常见的 modules/components 都是 es6 模块。哪些没有被转译。因为通用模块也在不断发展。如果我们 build/transpile 他们我肯定 React HMR 在那之后将无法工作（一个疯狂的猜测）。以下是我的目录结构

common 包含像 table,accordion 等常见的反应元素，它们作为默认的 es6 模块导出。

react-app 将 common 导入为 dependency。 react-app 已设置 webpack 构建配置。

现在当我将 common 模块导入我的 react-app babel transform 时失败并出现此错误

Button.component.jsx 7:19
Module parse failed: Unexpected token (7:19)
You may need an appropriate loader to handle this file type.
| const { Search } = Input;
| class TextBoxWithButton extends React.Component {
>   static propTypes = {
|     placeholder: PropTypes.string.isRequired,
|     onAction: PropTypes.func.isRequired,
 @ ./src/App/Modules/Todo/Components/Header/Header.component.jsx 10:0-111 16:25-41
 @ ./src/App/Modules/Todo/Todo.component.jsx
 @ ./src/App/Router/index.jsx
 @ ./src/App/Layout/index.jsx
 @ ./src/App/index.jsx
 @ ./src/App.hot.js
 @ ./src/index.jsx

这意味着 babel-loader 无法解析和转译 node_nodules 文件夹中的内容，这是有道理的，因为所有依赖项都应该已经转译。但不总是。如果你管理本地依赖项，你就不能一直构建它们（这就是我的想法）

现在我在网上找到了一些解决方案，使 1bable-loader 不排除 node_modules 或忽略 @mypackagein exclude 正则表达式。但在我的情况下没有任何效果。

这是我到目前为止所尝试过的。

从 babel-loader 中删除 exlucde: /node_modules/ => 不起作用
使用 require.resolve('babel-loader') => 不工作
添加resolve.symlinks= false.
添加 resolve.modules='node_modules' 或 path.resove(__dirname,'node_modules') => 不工作
将包路径添加到 babel-loader 包括 include: [srcPath, lernaPackagesPath]、

似乎没有任何效果。有什么我想念的吗？ here 是我的 git 测试仓库的 link。

Answer 1

babel-loader 默认情况下不会转译 node_modules 中的任何内容。您可以在 node_modules 中明确说明要转译的内容，但在 @babel7.0.0 之后似乎也不起作用。还有一个 .babelrc 的范围，它在 @babel7.0.0.

中被引入

根据我在正常情况下所做的研究 node_modules 预计会转译 commonjs 或 umd 模块。可以由任何应用程序导入。在我的例子中，我的 packages/components 其中所有 es6 模块都需要转译。我的 webpack 构建失败了，因为 babel-loader 只是忽略了它们。

所以我决定使用 @babel/cli 来转换我的组件所在的每个包我必须将 .babelrc 和其他配置一起添加到我的组件包并使用 @babel/cli[ 构建它们=31=]

这是我 package.json

中的 scripts

"scripts": {
    "start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
  },

然后我的 package.json 看起来像这样

{
  "name": "@pkg/components",
  "version": "1.0.1",
  "description": "a repository for react common components. may or may not be dependent on elements",
  "main": "dist/index.js",
  "author": "hannad rehman",
  "license": "MIT",
  "scripts": {
    "start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
  },
  "dependencies": {
    "@pkg/constants": "^1.0.1",
    "@pkg/elements": "^1.0.1"
  },
  "peerDependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-router-dom": "^4.3.1"
  }
}

用这种方法。我所有的常用包都将在任何应用程序导入它们之前进行单元测试、检查和构建。 babel 具有监视模式，可确保在发生更改时始终进行转译。

最后也是最重要的反应 HMR 按预期工作。

更新

上述解决方案确实有效，但几个月后我通过在 babel 加载器

中使用 include 属性更改了它

{
      test: /\.js(x?)$/,
      include: [/node_modules\/@pkg/],
      use: [
        'thread-loader',
        {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            configFile: path.resolve(
              __dirname,
              '../../../../',
              `${env.appConfig.folderSrc}/babel.config.js`,
            ),
          },
        },
      ],
    }

即使在排除块中指定忽略包后，babel-loader 也不会转译 node_modules 中的包 (lerna)

babel-loader not transpiling packages in node_modules even after specifying in exclude block to ignore the package (lerna)

babeljs

webpack-4

babel-loader

lerna