错误：缺少类属性转换
Posted
技术标签:
【中文标题】错误：缺少类属性转换【英文标题】：Error: Missing class properties transform 【发布时间】：2016-06-01 17:32:37 【问题描述】：Error: Missing class properties transform
Test.js:
export class Test extends Component
constructor (props)
super(props)
static contextTypes =
router: React.PropTypes.object.isRequired
.babelrc:
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-class-properties"]
package.json:
"babel-core": "^6.5.1",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.5.2",
我搜索了网络，所有修复都围绕着：升级到 babel6，将“stage-0”的顺序切换到“es2015”之后。我都做了。
【问题讨论】：
【参考方案1】：你需要安装@babel/plugin-proposal-class-properties:
npm install @babel/plugin-proposal-class-properties --save-dev
或
yarn add @babel/plugin-proposal-class-properties --dev
并将以下内容添加到您的 Babel 配置文件中 - 通常是 .babelrc 或 babel.config.js。
"plugins": ["@babel/plugin-proposal-class-properties"],
【讨论】：
有了新包，“插件”部分应该是这样的：plugins: ['@babel/plugin-proposal-class-properties']【参考方案2】：
如果你使用的是 Babel 7.4 或更新版本，@babel/pollify 已被弃用。
安装 core-js、regenerator-runtime、@babel/plugin-proposal-class-properties 和 babel-plugin-transform-class-properties 软件包。
yarn add core-js regenerator-runtime @babel/plugin-proposal-class-properties babel-plugin-transform-class-properties --dev
// or
npm install core-js regenerator-runtime @babel/plugin-proposal-class-properties babel-plugin-transform-class-properties --save-dev
然后，添加到.babelrc 或babel.config.js
"plugins": ["@babel/plugin-proposal-class-properties"],
最后，在你的主 js 文件中添加这行：
import "core-js/stable";
import "regenerator-runtime/runtime";
取自： https://***.com/a/54490329/9481448
【讨论】：
【参考方案3】：当我不假思索地将一些箭头函数放入我的一个类中时，我遇到了这个问题。一旦我将箭头函数更改为常规函数/方法定义，错误就解决了。
【讨论】：
在使用 WebComponents 和提供帮助的lit-element 库时。
如果您不打算将箭头函数包含为类属性，则可能值得考虑此修复，因为它们在转换为 ES2017 后有一些明显的缺点。见medium.com/@charpeni/…【参考方案4】：
以防万一有人仍然面临同样的问题， 以下博客文章确实帮助了我： https://devblogs.microsoft.com/typescript/typescript-and-babel-7/
就我而言（babel 7.9.6、typescript 3.9.2、webpack 4.43.0），我必须执行以下操作：
运行以下命令：
npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
创建 .babelrc 文件（是的，我以前没有，它确实工作得很好） 包含以下内容：
"presets": [
"@babel/env",
"@babel/preset-typescript"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
【讨论】：
【参考方案5】：我遇到了同样的错误，我在 .babelrc 中正确订购了我的插件，但它仍然存在。删除我在 webpack 加载器中定义的预设参数修复了它。
以前的 webpack 配置：
module:
rules: [
test: /.jsx?$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
query:
presets: ['es2015', 'react']
]
工作 webpack 配置：
module:
rules: [
test: /.jsx?$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_modules/
]
【讨论】：
【参考方案6】：在我的情况下，修复是在我的 webpack.config.js 的选项属性中定义 'transform-class-properties' 插件，我使用的是 babel V6
rules:[
.....,
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: plugins: ['transform-class-properties']
]
【讨论】：
【参考方案7】：终于发现，要消除 Laravel-Mix 项目中的这个错误，在webpack.mix.js 中添加以下代码
mix.webpackConfig(
module:
rules: [
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loaders: [
'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
]
],
);
【讨论】：
【参考方案8】：我使用koa-react-view 遇到了同样的问题。从这些答案中获得灵感，最后在koa server.js 中使用以下代码修复它：
const register = require('babel-register');
register(
presets: ['es2015', 'react', 'stage-0'],
extensions: ['.jsx']
);【讨论】：
【参考方案9】：由于使用了 env 预设，我也遇到了这个错误：
"presets": [ "react", "es2015", "stage-0", ["env",
"modules": false
]],
在我删除 env 预设后，它运行良好
【讨论】：
【参考方案10】：我遇到此错误是因为我使用的是stage-3 而不是stage-0。
【讨论】：
【参考方案11】：好的，终于想通了，在我的webpack.config.js 我有：
module:
loaders: [
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loaders: [
'react-hot',
'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
]
]
'babel?presets[]=stage-0,presets[]=react,presets[]=es2015'
必须以与.babelrc相同的方式处理，将stage-0切换到es2015之后，它可以完美编译。
【讨论】：
你不需要两者。如果你有一个.babelrc，你可以放弃装载机上的所有参数。
你只是通过调整你的 webpack.config.js 来解决你的问题吗？我面临同样的问题，但我正在使用 browserify，但我无法摆脱它。
我正在使用 browserify 并使用这个 oder "es2015", "react", "stage-0" 为我工作。我把配置放在 .babelrc 中。
嘿@speak，很棒的发现。但是我建议您在此答案中写下正确的配置，因为我首先更改为您的错误配置-_-
@lenny.myr 如果您使用的是 browserify，则需要安装 babeljs.io/docs/plugins/preset-stage-0。然后在你的 gulp 任务更新转换为 .transform('babelify', presets: ['es2015', 'react','stage-0'])【参考方案12】：
@speak 是对的，但你需要改变顺序
loaders: [
'react-hot',
'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
]【讨论】：
以上是关于错误：缺少类属性转换的主要内容，如果未能解决你的问题，请参考以下文章