创建react应用4

ECMAScript 现在已经到 2018 了，每次都有新的语言特性，为了能够使用这些新特性，我们可以通过安装 babel 插件方式获得支持。

babel 插件列表

下面是安装 @babel/plugin-proposal-class-properties 的过程，该插件实现了类里定义属性的语言特性。

安装依赖

yarn add -D @babel/plugin-proposal-class-properties

修改 babel.config.js

加入代码plugins: ['@babel/plugin-proposal-class-properties']，最终的 babel.config.js 内容如下

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "targets": {
          "browsers": ["cover 99.5% in CN"]
        }
      }
    ],
    "@babel/preset-react"
  ],
  plugins: ['@babel/plugin-proposal-class-properties']
}

测试

现在我们就可以在类里定义属性了

我们在 main.js 里随便写一个类

import ReactDOM from "react-dom";
import React from "react";

function App() {
    return (
        <div className="App">
            <h1>Hello World</h1>
        </div>
    );
}

const rootElement = document.getElementById("root");

ReactDOM.render(<App/>, rootElement);

// 定义 Person 类
class Person {
  // 定义类的属性
  name='zhangsan';
  logName(){console.log(this.name);
  }
}
new Person().logName();

然后就能看到控制台打印了「zhangsan」。

eslint 问题

eslint 报错了

ERROR in ./app/main.js
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/jevi/projects/react-project/app/main.js
  17:7  error  Parsing error: Unexpected token =

✖ 1 problem (1 error, 0 warnings)

很明显是因为 eslint 不认识【类里定义属性】的语法特性。
接下来我们让 eslint 能够识别该特性。

安装 babel-eslint

yarn add -D babel-eslint

修改.eslintrc.js

加入新的配置parser: "babel-eslint"，最终的.eslintrc.js 如下

module.exports = {
  'env': {
    'browser': true,
    'es6': true,
  },
  'extends': ["eslint:recommended","plugin:react/recommended","google"],
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly',
  },
  'parserOptions': {
    'ecmaFeatures': {'jsx': true,},
    'ecmaVersion': 2018,
    'sourceType': 'module',
  },
  'plugins': ['react',],
  'rules': { },
  "settings": {
    "react": {"version": "detect"}
  },
  parser: "babel-eslint"
};

然后重新启动 webserveryarn start:dev，发现之前的报错不见了。