Question

我使用的是web-pack和flowtype。

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

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

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


10 | olMap：对象;

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

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

我认为这个问题与网络包相关。你能指出我有什么问题以及如何解决它吗？

＆＃13;

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

＆＃13;

我的package.json

＆＃13;

"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"
  },

＆＃13;

我的.babelrc

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

  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'
          ]
        }
      }
    ]
  }

＆＃13;

.babelrc

＆＃13;

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

＆＃13;

Answer 2

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

在.babelrc

中

{

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

错误：使用web-pack

2 个答案: