webpack - Babel 7 - 装饰器转换不适用于 babel-loader
问题描述
我对应用程序中的装饰器React
有mobX
疑问。它适用于.babelrc
,但我也babel-loader
有webpack
。我将 babel config 复制到webpack
config,但它不起作用。我检查了我可以在谷歌中找到的所有解决方案,但它们都是指bebelrc
,而不是webpack
config。我的webpack
配置:
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'babel-polyfill',
path.join(__dirname, '../../src/web/index')
],
output: {
path: path.join(__dirname, '../public'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
["@babel/preset-env", { "modules": false }],
"@babel/preset-react",
],
plugins: [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
["@babel/plugin-transform-runtime", {
"helpers": true,
"regenerator": false
}],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"react-hot-loader/babel"
]
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
PLATFORM_ENV: JSON.stringify('web')
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
错误:
ERROR in ./src/web/stores/UIStore.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/alder/Projects/_apps/service_exchange/service-exchange-app/src/web/stores/UIStore.js: Decorators transform is necessary.
似乎babel-loader
不适用于plugin-proposal-decorators
有什么解决办法吗?
package.json
:
"scripts": {
"web-dev": "webpack-dev-server --content-base web/public/ --config web/webpack/web.dev.config.js --port 3002 --inline --hot --colors --mode development"
},
"dependencies": {
"@babel/core": "^7.0.0-rc.1",
"@babel/plugin-proposal-class-properties": "7.0.0-rc.1",
"@babel/plugin-proposal-decorators": "7.0.0-rc.1",
"@babel/plugin-proposal-export-namespace-from": "7.0.0-rc.1",
"@babel/plugin-proposal-function-sent": "7.0.0-rc.1",
"@babel/plugin-proposal-json-strings": "7.0.0-rc.1",
"@babel/plugin-proposal-numeric-separator": "7.0.0-rc.1",
"@babel/plugin-proposal-optional-chaining": "^7.0.0-rc.1",
"@babel/plugin-proposal-throw-expressions": "7.0.0-rc.1",
"@babel/plugin-syntax-dynamic-import": "7.0.0-rc.1",
"@babel/plugin-syntax-import-meta": "7.0.0-rc.1",
"@babel/plugin-transform-runtime": "^7.0.0-rc.1",
"@babel/polyfill": "7.0.0-rc.1",
"@babel/preset-env": "^7.0.0-rc.1",
"@babel/preset-react": "^7.0.0-rc.1",
"@babel/register": "7.0.0-rc.1",
"@babel/runtime": "^7.0.0-rc.1",
"@material-ui/core": "^1.5.0",
"@material-ui/icons": "^2.0.2",
"axios": "^0.18.0",
"babel-loader": "^8.0.0-beta.0",
"final-form": "^4.9.1",
"history": "^4.7.2",
"material-ui-chip-input": "^1.0.0-beta.5",
"material-ui-superselectfield": "^1.9.8",
"material-ui-time-picker": "^1.0.0",
"mobx": "^5.0.3",
"mobx-react": "^5.2.5",
"mobx-state-router": "^3.1.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-event-listener": "^0.5.10",
"react-final-form": "^3.6.5",
"react-hot-loader": "4.3.4",
"react-native": "0.56.0",
"react-router-dom": "^4.3.1",
"react-select": "^2.0.0",
"styled-components": "^3.4.2"
},
"devDependencies": {
"@babel/cli": "7.0.0-rc.1",
"babel-eslint": "^8.2.6",
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.11.1",
"jest": "23.5.0",
"json-loader": "^0.5.7",
"mobx-logger": "^0.7.1",
"mobx-react-devtools": "^6.0.2",
"react-native-cli": "^2.0.1",
"react-native-scripts": "^1.14.0",
"react-test-renderer": "16.4.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.6.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5",
"webpack-hot-middleware": "^2.22.3"
}
在我必须stage-2
从版本 beta 54中删除后它停止工作
更新:
我发现我可以在 webpack 中使用 babel 配置,例如:
loader: 'babel-loader',
options: {
babelrc: true,
cacheDirectory: true
}
但它没有帮助,我有同样的错误。
更新2:
在 babel-loader 存储库中发现了类似的问题,但它也没有帮助。
解决方案
我在一个块的开头移动了装饰器插件,它可以工作!
{
"presets": [
["@babel/preset-env", { "modules": false }],
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
],
"env": {
"development": {
"plugins": ["react-hot-loader/babel"]
}
}
}
推荐阅读
- node.js - 无论在寄存器中输入什么,使用 react-redux 和 jwt 都会出现“请输入所有字段错误”
- discord - Python discord bot 吐出回溯错误
- javascript - Javascript计算购物车总数
- ruby - 安装 travis-cli 时在 macOS 中找不到 libffi 的包配置
- api - 根据日期过滤 Bing 自定义搜索结果
- dynamic - 计算从 L 到 R 的所有数字,使得二进制表示中恰好有一个零。我对数字 dp 主题非常陌生
- c++ - 在c ++ float中使用小数点前后的值?
- reactjs - React Redux FireStore - FireStore 集合中的更改不会反映在我的屏幕上,除非我刷新
- mongodb - MongoDB 聚合 - 按多个键分组,每个级别的分组都有计数
- c# - 动态视图组件菜单的 LINQ 语句问题