模块构建失败：错误：无法找到相对于目录的预设“transform-class-properties”

Question

我已经尝试在我的类中放入一个无法编译的箭头函数。

我读过我应该安装https://www.npmjs.com/package/babel-plugin-transform-class-properties

现在我收到了错误：

模块构建失败：错误：无法找到相对于目录“/ home / luke / Documents / myProject”的预设“transform-class-properties”

我已经尝试过这些帖子中提出的解决方案（和其他人）

Webpack + Babel：无法找到相对于目录的预设“es2015”

错误：无法找到相对于目录的预设“es2015”

我目前的设置如下：

/app/components/App.js

import React from 'react'
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'

class App extends React.Component{

  sayHello = name => `Hello ${name}!`

  render(){
    return(
      <Router>
        <div >
          ...
        </div>
      </Router>
    )
  }
}

export default App

/package.json

{
  "name": "um-web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "NODE_ENV='production' webpack -p"
  },
  "babel": {
    "presets": [
      "env",
      "react",
      "es2015",
      "transform-class-properties"
    ]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "html-webpack-plugin": "^2.28.0",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "amazon-cognito-identity-js": "^1.19.0",
    "axios": "^0.16.2",
    "d3": "^4.9.1",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "prop-types": "^15.5.10",
    "query-string": "^4.3.4",
    "react": "^15.6.1",
    "react-dimensions": "^1.3.0",
    "react-dom": "^15.6.1",
    "react-measure": "^2.0.2",
    "react-router-dom": "^4.1.1",
    "recharts": "^1.0.0-alpha.1",
    "semantic-ui-react": "^0.69.0"
  }
}

/webpack.config.js

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')

var config = {
  entry: './app/index.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module:{
    rules:[
      { test: /\.(js)$/, use: 'babel-loader'},
      { test: /\.css$/, use: ['style-loader', 'css-loader']}
    ]
  },
  devServer: {
    historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
}

if(process.env.NODE_ENV === 'production'){
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env' : {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  )
}

module.exports = config

Answer 1

transform-class-properties是一个插件而不是预设，所以你应该把它放在你的babel插件配置中。

这是一个例子.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"],
        "uglify": true
      },
      "modules": false
    }],
    "react"
  ],
  "plugins": [
    ["transform-class-properties", { "spec": true }],
    "transform-decorators",
    "transform-object-rest-spread",
    "react-hot-loader/babel"
  ]
}

以及这个插件的解释：

https://babeljs.io/docs/plugins/transform-class-properties/

希望这可以帮助。

Answer 2

babel- plugin -transform-class-properties是一个插件而不是预设。 当您在presets它时，除了文字模块名称之外，Babel还会查找带有babel-preset-前缀的模块。 有关详细信息，请参阅插件/预设路径 。

您需要将它放在plugins下，如README中的用法所示。

"babel": {
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties"
  ]
},

我也删除了es2015预设，因为它不赞成env ，它包含es2015所做的一切以及更多。