Javascript @babel/plugin建议类属性仍然失败,并带有“0”;类属性是';t当前已启用“;
正在尝试使用Javascript @babel/plugin建议类属性仍然失败,并带有“0”;类属性是';t当前已启用“;,javascript,react-native,babeljs,Javascript,React Native,Babeljs,正在尝试使用@babel/plugin建议类属性 A. 产生这个错误 Failed to compile. ./node_modules/react-native-animatable/createAnimatableComponent.js SyntaxError: /Users/timothyw/Projects/beatthemarket/beatthemarket.reactnative-paper/beatthemarket.frontend/node_modules/re
@babel/plugin建议类属性
Failed to compile.
./node_modules/react-native-animatable/createAnimatableComponent.js
SyntaxError: /Users/timothyw/Projects/beatthemarket/beatthemarket.reactnative-paper/beatthemarket.frontend/node_modules/react-native-animatable/createAnimatableComponent.js: Support for the experimental syntax 'classProperties' isn't currently enabled (133:24):
131 |
132 | return class AnimatableComponent extends Component {
> 133 | static displayName = `withAnimatable(${wrappedComponentName})`;
| ^
134 |
135 | static propTypes = {
136 | animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
B
安装和代码如下所示
嘘
MyComponent.js
...
<Animatable.View
animation="pulse"
easing="ease-out"
iterationCount="infinite">
<SocialButton
onPress={signInWithGoogle}
imageSource={IMAGES.GOOGLE}
style={{
container: themedStyles.googleIconContainer,
image: themedStyles.googleIcon,
}}
/>
</Animatable.View>
...
C
这些笔记似乎没有什么帮助
在文件webpack.config.js中必须安装 npm install@babel/core@babel/plugin提案类properties@babel/preset env@babel/preset react babel loader 及 更改输入和输出
在文件webpack.config.js中
...
<Animatable.View
animation="pulse"
easing="ease-out"
iterationCount="infinite">
<SocialButton
onPress={signInWithGoogle}
imageSource={IMAGES.GOOGLE}
style={{
container: themedStyles.googleIconContainer,
image: themedStyles.googleIcon,
}}
/>
</Animatable.View>
...
module.exports = {
presets: [ "module:metro-react-native-babel-preset", "@babel/preset-env", "@babel/preset-react" ],
plugins: [ ["@babel/plugin-proposal-class-properties", {"loose": true}] ],
}
const path = require('path')
module.exports = {
entry: path.resolve(__dirname,'src', 'app.js'),
output: {
path: path.resolve(__dirname, "public","dist",'javascript'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
"targets": "defaults"
}],
'@babel/preset-react'
],
plugins: [
"@babel/plugin-proposal-class-properties"
]
}
}]
}
]
}
}