建立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，發現以前的報錯不見了。