尝试在 monorepo 项目中配置 Babel - 当前未启用“classProperties”。如何在 monorepo 项目中设置 Babel？

Question

我有一个根据本教程设置的 monorepo：tutorial。

这个项目由一个主文件夹（series4）组成，其中包含三个包，分别专注于 web、移动应用程序和公共代码——它们分别被命名为 web、app 和 common 文件夹。

总结...这些文件夹是：

/series4/packages/web
/series4/packages/common
/series4/packages/app

我正在尝试使用 Modal 模块，但出现此错误：

语法错误：series4/node_modules/react-native-modal/src/index.js： 目前不支持实验性语法“classProperties” 启用 (25:20)

我已阅读此处的文档：Babel。

但是我无法解决这个错误。

“series4”目录下的package.json是：

{
  "name": "@wow/common",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "rimraf dist && tsc",
    "watch": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.8.2",
    "react-native": "0.59.0-rc.1",
    "react-native-elements": "^1.1.0",
    "react-native-image-slider-box": "^1.0.5",
    "react-native-snap-carousel": "^3.8.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@types/react-native": "0.57.36",
    "rimraf": "^2.6.3",
    "typescript": "3.3.3"
  }
}

babel.config.js 文件（在 series4 目录下）是：

module.exports =  {
    presets: [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    plugins: [
      '@babel/proposal-class-properties',
      '@babel/plugin-proposal-class-properties'
    ],
    babelrcRoots: [
        ".",
        "packages/*",
      ],
  };

我在 web 和 common 文件夹中配置了以下 babelrc。

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

common 文件夹下的 package.json 为：

{
  "name": "@wow/common",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "rimraf dist && tsc",
    "watch": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.8.2",
    "react-native": "0.59.0-rc.1",
    "react-native-elements": "^1.1.0",
    "react-native-image-slider-box": "^1.0.5",
    "react-native-snap-carousel": "^3.8.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@types/react-native": "0.57.36",
    "rimraf": "^2.6.3",
    "typescript": "3.3.3"
  }
}

web文件夹中的package.json是：

{
  "name": "react-native-web-workout-series",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.5",
    "@types/node": "11.9.4",
    "@types/react": "16.8.3",
    "@types/react-dom": "16.8.1",
    "@wow/common": "1.0.0",
    "react": "^16.8.2",
    "react-art": "16.8.2",
    "react-dom": "^16.8.2",
    "react-native": "0.55.4",
    "react-native-modal": "^11.3.1",
    "react-native-web": "0.10.0",
    "react-scripts": "2.1.5",
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@types/react-native": "0.55.4",
    "babel-plugin-module-resolver": "^3.2.0",
    "cross-env": "^5.2.0"
  }
}

运行时出现错误

yarn start 

web 文件夹中的命令（当我在没有 Modal 模块的情况下执行该命令时，该命令可以完美运行）。

我错过了什么？

Answer 1

这可能是由react-native-modal 未转译类属性语法引起的。而且，默认情况下，node_modules 不会被转译。当 js 引擎读取类属性语法时，它会退出。

你需要babel.config.js 来影响node_modules

module.exports = function (api) {
    api.cache(true);
    return {
        babelrcRoots: [
            '.',
            './modules/*'
        ],
      ignore: [/node_modules/(?!react-native-modal)/],
      presets: ["@babel/preset-env"]
    };
}

'classProperties' isn't currently enabled还暗示JS引擎通过一些配置支持类属性语法，也许有办法让引擎接受这种语法

见this

TL;DR

要在 create-react-app 中为 babel 自定义配置，您需要首先 eject 并在此之后直接处理配置。

运行npm run eject，转到config/webpack.config.js，找到babel-loader并将其替换为test: /\.(js|mjs|jsx|ts|tsx)$/。

...
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [paths.appSrc, paths.appNodeModules],
  exclude: /node_modules\/(?!react-native-modal|react-native-animatable)/,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    presets: [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript",
    ],
    plugins: [
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent:
                '@svgr/webpack?-svgo,+titleProp,+ref![path]',
            },
          },
        },
      ],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
    ],
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
    cacheCompression: isEnvProduction,
    compact: isEnvProduction,
  },
},
...

---

我说的部分正确，babel 没有转译react-native-modal。而且，为什么创建 babel.cofig.js 不起作用的是，create-react-app 使用的配置存在于另一个宇宙 (see this SO)。

起初我注意到您的babel.config.js 中有语法错误，但构建项目并没有对此有任何抱怨。所以我怀疑它没有被使用并遇到上面的 SO 帖子。

它现在可以成功编译，但会引发一些运行时错误，因为某些包是为移动应用和 expo 构建的。

---

超出范围

一个值得注意的是react-native-modal。

// react-native-modal
import { DeviceEventEmitter } from 'react-native';

但是，在react-native，

module.exports = {
  get DeviceEventEmitter() { ... }
};
// which is approximately
export default {
  DeviceEventEmitter,
}

babel 认为使用命名导入作为对象解构是错误的。您可以通过

解决此问题

presets: [
  ["@babel/preset-env", { module: 'commonjs' }],
  "@babel/preset-react",
  "@babel/preset-typescript",
],

但是，DeviceEventEmitter 将是 undefined。其他导出工作正常。