如何安裝節點模塊@babel/plugin-transform-class-properties？

Question

我一直在按照https://github.com/babel/babelify的說明進行操作，但在此過程中遇到了錯誤。 我運行以下代碼行：

browserify script.js -o bundle.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] --plugins [ @babel/plugin-transform-class-properties ] ]

終端產生以下錯誤消息：

Error: Cannot find module '@babel/plugin-transform-class-properties' from '/path/to/file' while parsing file: /path/to/file/circle-graph-2.js

我的 package.json 文件是

{
  "name": "robert",
  "version": "1.0.0",
  "description": "This is the third step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of [occupations](http://nbremer.github.io/occupations/). The D3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "transform-class-properties"
    ]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^10.0.0"
  }
}

當我在終端中嘗試以下行時，它說找不到 package：

npm install --save-dev @babel/plugin-transform-class-properties

如何克服此錯誤消息？

Answer 1

由於您使用的是Babel 7（基於您的"@babel/core": "^7.1.6"條目），我認為您正在尋找npm install --save-dev @babel/plugin-proposal-class-properties是Babel 7插件的新版本。請注意，名稱從“plugin-transform-class-properties” - >“babel-plugin-proposal-class-properties”更改。

這是Babel故意做的 ，讓人們更加了解TC39流程中的功能。

如果你實際上仍然在使用Babel 6（很難說你的package.json有Babel 7和Babel 6條目，那么@Morty的評論就是你所需要的。

Answer 2

我的項目有同樣的錯誤，但是npm install --save-dev @babel/plugin-proposal-class-properties install對我來說還不夠。

node-sass for babel 7.11.4搜索node-sass for babel 7.11.4在這里找到了修復

我的版本基本上是錯誤的，所以我在package.json文件中添加了"@babel/core": "^7.13.14"並再次運行npm install 。

Answer 3

如果您使用的是最新版本。 只需運行npx babel-upgrade ，它將顯示您需要在 babel.rc 文件中更新的更改