@babel/plugin-proposal-class-properties 不起作用答案

【问题标题】：@babel/plugin-proposal-class-properties doesn't work@babel/plugin-proposal-class-properties 不起作用
【发布时间】：2019-05-01 16:51:30
【问题描述】：

我有这样一个项目结构：

/main-folder

  /apps
    /app — // I want to import "project-b" here
      /node_modules
      /public
      /src
        |app.js
        |app.css
      |.babelrc
      |package.json
      |package-lock.json
      |webpack.config.js

  /static
    /project-b — // Project that I want to export
      /node_modules
      /public
      /src
        /lib
          ...components
      |.babelrc
      |package.json
      |package-lock.json

当我尝试导入没有类属性的组件时一切正常。但是，如果我导入具有类属性的组件：

我想如果我添加.babelrc 它会起作用（我将.babelrc 添加到app 和project-b 文件夹，但它仍然不起作用）

.babelrc:

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

app package.json:

{
  "name": "auth",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack",
    "start:dev": "webpack-dev-server",
    "webpack:production": "webpack -p"
  },
  "author": "namename",
  "license": "MIT",
  "dependencies": {
    "css-loader": "^1.0.1",
    "entrl-ui-kit": "^1.0.3",
    "file-loader": "^2.0.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-router-dom": "^4.3.1",
    "react-transition-group": "^2.5.0",
    "style-loader": "^0.23.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

project-b package.json:

 {
  "name": "project-b",
  "version": "1.0.0",
  "author": "namename",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "start": "react-scripts start",
    "build-examples": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build": "rimraf ./build && mkdirp ./build && babel -d ./build ./src"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0-beta.6",
    "babel-preset-latest": "^6.24.1",
    "mkdirp": "^0.5.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "^2.1.1",
    "react-transition-group": "^2.5.0",
    "rimraf": "^2.6.2"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "dependencies": {
    "babel-core": "^7.0.0-bridge.0"
  }
}

【问题讨论】：

你读过babeljs.io/docs/en/config-files#monorepos吗？
@loganfsmyth，是的，但是我不确定我需要做什么来解决这个问题
该页面中的第一句话是“任何 monorepo 结构的第一步应该是创建一个 babel.config.js 文件”，您的示例中似乎没有，也不是该部分中描述的babelrcRoots。有没有可以改写的方法来提供帮助？
@loganfsmyth，我重读了你发给我的内容，解决了我的问题，非常感谢！

标签： javascript node.js reactjs babeljs

【解决方案1】：

我需要做的就是将babel.config.js 添加到根文件夹：

感谢loganfsmyth！

/main-folder
  |babel.config.js — //HERE!
  /apps
    /app — // I want to import "project-b" here
      /node_modules
      /public
      /src
        |app.js
        |app.css
      |.babelrc
      |package.json
      |package-lock.json
      |webpack.config.js

  /static
    /project-b — // Project that I want to export
      /node_modules
      /public
      /src
        /lib
          ...components
      |.babelrc
      |package.json
      |package-lock.json

babel.config.js:

module.exports = {
  babelrcRoots: [
    ".",
    "static/project-b/*"
  ]
};

【讨论】：