模塊構建失敗：錯誤：無法找到相對於目錄的預設“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所做的一切以及更多。