即使在exclude块中指定忽略包（lerna）之后，babel-loader也没有在node_modules中转换包

Question

因此，我正在尝试使用lerna进行monorepo设计，以用于我们的反应应用。我们的想法是创建一个repo，它将所有的反应项目作为lerna包以及一些在应用程序之间共享的通用模块/组件。

现在所有这些常见的模块/组件都是es6模块。这些都没有被转化。因为共同模块也在不断发展。如果我们建立/转换他们，我肯定反应HMR将不会工作（一个疯狂的猜测）。以下是我的目录结构

package.json
lerna.json
|--packages
     |--common
     |--react-app
     |--constants
     |--utilities

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

react-app将common作为dependency进口。 react-app有webpack构建配置集。

现在，当我导入common模块到我的react-app巴贝尔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排除正则表达式。但在我的情况下没有任何工作。

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

1. 从exlucde: /node_modules/删除babel-loader =>不工作
2. 使用require.resolve('babel-loader') =>不工作
3. 添加resolve.symlinks= false。
4. 添加resolve.modules='node_modules'或path.resove(__dirname,'node_modules') =>不工作
5. 添加包到babel-loader的路径包括include: [srcPath, lernaPackagesPath]，

似乎没什么用。有什么东西我错过了吗？ here是我的git test repo的链接。

Answer 1

babel-loader默认情况下不会发送任何node_modules中的内容。你可以明确地说明在node_modules中要传播什么，但在@babel7.0.0之后似乎也没有用。在.babelrc也引入了@babel7.0.0的范围。

根据我在正常情况下所做的研究，node_modules期望已经转换了commonjs或umd模块。可以由任何应用程序导入。在我的情况下我的包/组件所有需要转换的q​​azxswpoi模块。而我的webpack构建失败了，因为es6只是忽略了它们。

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

这是我的@babel/cli中的scripts

package.json

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

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

用这种方法。在任何应用程序导入之前，我的所有常用软件包都将进行单元测试，打印和构建。

{
  "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的反应按预期进行。