错误：使用 web-pack 时缺少类属性转换

Question

我正在使用 web-pack 和 flowtype。

以下代码在 flowtype 中有效，但在使用 web-pack 构建应用程序时，我收到以下错误：

./src/map/MapOpenLayer.js 模块构建失败：语法错误：缺少类属性转换。

8 | */ 9 | class MapOpenLayer 扩展了 React.Component {

10 | olMap：对象；

我尝试安装babel-plugin-transform-class-properties

并在我的 .babelrc 文件中进行了一些设置，但没有成功。

我认为这个问题与 web-pack 相关。 你能指出我出了什么问题以及如何解决吗？

 class MapOpenLayer extends React.Component < any, any > { olMap: Object; state: Object; constructor(props: Object) { super(props) this.olMap = {} this.state = { activeMapRegion: 'currentLocation', activeMapType: 'temperature' } } }

我的 package.json

 "dependencies": { "babel": "6.23.0", "babel-cli": "6.24.0", "babel-preset-flow":"6.23.0", "babel-core": "6.24.0", "babel-loader": "6.4.1", "babel-plugin-recharts": "1.1.0", "babel-polyfill": "6.23.0", "babel-preset-es2015": "6.24.0", "babel-preset-react": "6.23.0", "babel-preset-stage-2": "6.24.1", "bower": "1.8.0", "css-loader": "0.28.1", "dot-prop-immutable": "1.3.1", "extract-text-webpack-plugin": "2.1.0", "file-loader": "0.11.1", "flux-standard-action": "1.2.0", "react": "15.6.1", "react-dom": "15.6.1", "react-redux": "5.0.6", "react-router": "4.1.1", "react-router-dom": "4.1.1", "recharts": "0.22.4", "redux": "3.6.0", "redux-promise-middleware": "4.2.0", "redux-thunk": "2.2.0", "moment": "2.18.1", "style-loader": "0.17.0", "openlayers": "4.1.1", "url-loader": "0.5.8", "weather-icons": "1.3.2", "webpack": "2.2.1", "webpack-dev-server": "2.4.2", "babel-plugin-transform-class-properties":"6.24.1" }, "devDependencies": { "babel-eslint": "8.0.0", "enzyme": "2.9.1", "enzyme-to-json": "1.5.1", "eslint": "4.7.0", "eslint-plugin-react": "6.10.0", "jest": "21.1.0", "jest-css-modules": "1.1.0", "jest-enzyme": "3.8.2", "react-addons-test-utils": "15.6.0", "react-test-renderer": "15.6.1", "redux-mock-store": "1.3.0", "redux-test-utils": "0.1.2", "sinon": "3.2.1", "standard": "10.0.3", "jest-cli":"21.1.0", "fetch-mock":"5.12.2", "flow-bin": "0.55.0", "flow-typed":"2.1.5", "flow-upgrade":"1.0.3", "eslint-config-standard":"10.2.1", "eslint-config-standard-flow": "1.0.1", "npx":"9.6.0", "babel-plugin-transform-class-properties":"6.24.1" },

我的 .babelrc

 { "presets": [ "stage-2", "es2015", "react", "flow" ], "plugins": [ "recharts", "transform-class-properties" ] }

Answer 1

我能够在 .babelrc 和 web-pack 配置中添加插件信息来解决这个问题：

 module: { loaders: [ { test: /\\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader', query: { plugins: [ 'recharts', 'transform-flow-strip-types', 'transform-class-properties' ], presets: [ 'es2015', 'stage-0', 'stage-2' ] } } ] }

.babelrc

 { "presets": [ "es2015", "stage-0", "stage-2", "react", "flow" ], "plugins": [ "recharts", "transform-flow-strip-types", "transform-class-properties" ] }

Answer 2

我认为您还需要另一个 babel 插件。 变换流带类型。

在你的 .babelrc

{

 "plugins": ["transform-flow-strip-types","transform-class-properties"]
}