我已经尝试在我的课程中放入一个无法编译的箭头功能。
我已经读过我应该安装https://www.npmjs.com/package/babel-plugin-transform-class-properties
现在我收到了错误:
模块构建失败:错误:无法找到预设 "变换级的属性"相对于目录 " /家庭/卢克/文档/ myProject的"
我已经尝试了这些帖子(和其他人)中建议的解决方案
Webpack + Babel: Couldn't find preset "es2015" relative to directory
Error: Couldn't find preset "es2015" relative to directory
我目前的设置如下:
/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
答案 0 :(得分:6)
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/
希望这有帮助。
答案 1 :(得分:3)
babel- 插件 -transform-class-properties 是一个插件而不是预设。当您在presets
下列出它时,除了文字模块名称之外,Babel还会查找带有babel-preset-
前缀的模块。有关详细信息,请参阅Plugin/Preset Paths。
您需要将其放在plugins
下,Usage in the README显示。
"babel": {
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties"
]
},
我还删除了es2015
预设,因为它已弃用,而env
包含es2015
所做的所有事情。