代码之家 › 专栏 › 技术社区 › hannad rehman

即使在exclude block中指定忽略包(lerna),babel loader也不会在node\模块中传输包

lerna babel-loader webpack-4 babeljs

1

hannad rehman · 技术社区 · 6 年前

lerna 用于我们的react应用程序。我们的想法是创建一个回购,将所有的项目作为 勒纳

common 包含常见元素,如 table,accordion 作为默认es6模块导出。

react-app 进口作为 dependency . 已设置网页包生成配置。

现在当我导入模块进入我的 反应应用程序 巴别塔 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/ 巴别塔装载机 =>不工作
使用 require.resolve('babel-loader')
添加 resolve.symlinks= false .
添加 resolve.modules='node_modules' 或 path.resove(__dirname,'node_modules')
将包路径添加到 巴别塔装载机 包括 include: [srcPath, lernaPackagesPath]

有什么我不知道的吗? here 是我的git测试repo的链接。

1 回复 | 直到 6 年前

1

4

hannad rehman 4 年前

babel-loader node_modules . 您可以明确地说要在其中传输什么但之后呢 @babel7.0.0 这似乎也不管用。 .babelrc 是在年引进的 @巴别塔7.0.0 .

根据我在正常情况下做的研究 节点\u模块 预期已传送 commonjs umd 模块。可以由任何应用程序导入。在我的情况下,我的包/组件 es6 需要传输的模块。我的网页包失败是因为 巴别塔装载机

所以我决定用 @babel/cli 为了传输组件所在的每个包,我必须添加 巴别塔 与其他配置一起添加到我的组件包中,并使用

这是你的名字 scripts 在我的 package.json

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

还有我的包.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`,
            ),
          },
        },
      ],
    }