Question

因此，我正在使用lerna来为React应用程序尝试monorepo设计。这个想法是创建一个仓库，该仓库将把所有的React项目作为lerna包，以及一些在应用程序之间共享的通用模块/组件。

现在所有这些通用模块/组件都是es6模块。没有转译。因为通用模块也在不断发展。如果我们建造/运输它们，我相信之后HMR不会起作用（一个大胆的猜测）。以下是我的目录结构

common包含诸如table,accordion等常见的react元素，这些元素作为默认的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文件夹中的内容，这是有道理的，因为所有依赖项都应该已经被转换了。但不总是。如果您管理本地依赖项，就不能一直保持它们的建立（这就是我的想法）

现在，我在网上找到了一些解决方案，这些解决方案使1 bable-loader不排除node_modules或忽略@mypackage排除正则表达式。但对我而言，没有任何效果。

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

从exlucde: /node_modules/中删除babel-loader =>不起作用
使用require.resolve('babel-loader') =>无效
添加resolve.symlinks= false。
添加resolve.modules='node_modules'或 path.resove(__dirname,'node_modules') =>无法正常工作
将包含babel-loader的软件包路径添加到include: [srcPath, lernaPackagesPath]，

似乎没有任何作用。我有什么想念的吗？ here是我的git测试库的链接。

Answer 1

默认情况下，

babel-loader不会转译node_modules中的任何内容。您可以在node_modules中明确说出要翻译的内容，但是在@babel7.0.0之后似乎也不起作用。还有.babelrc中引入的@babel7.0.0范围。

根据我在正常情况下进行的研究，node_modules期望移植commonjs或umd模块。可以由任何应用程序导入。在我的情况下，我的软件包/组件需要编译所有es6个模块。并且我的webpack构建失败了，因为babel-loader只是忽略了它们。

所以我决定使用@babel/cli来转换组件所在的每个软件包，因此我必须向组件软件包中添加.babelrc以及其他配置，并使用@babel/cli

这是我的scripts中的package.json

"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-loader即使在排除块中指定忽略包（lerna）后，也不会在node_modules中转译包

1 个答案: