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

Question

我有一个根据本教程设置的 monorepo:tutorial .

该项目由一个包含三个包的主文件夹 (series4) 组成，这三个包专注于 web、移动应用程序和通用代码 - 它们分别命名为 web、app 和 common 文件夹。

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

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

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

SyntaxError: series4/node_modules/react-native-modal/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (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

长话短说

在 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然后。其他导出工作正常。