React + MobX + Electron + Node.js + MongoDB 全棧項目開發實踐（二）容許 decorator

時間 2019-11-07

標籤 react mobx electron node.js node mongodb 項目開發實踐容許 decorator 欄目 React 简体版

原文原文鏈接

主要內容

配置 MobX，從 create-react-app 切換至 Webpack + Babel，以容許使用 decorator

切換腳手架

一開始爲了方便，沿用之前的辦法使用了官方的 create-react-app。嘗試使用 Mobx 的 decoration 時報錯，發現 create-react-app 不支持使用 decoration。在網上找了一些文章，嘗試使用了 npm eject 等東拼西湊的方法，老是會有報錯。後來在 Mobx 官方文檔裏找到了一些推薦的樣板，下下來體驗了一下，學習一下他們的配置。css

配置文件們（位於項目根目錄）react

.babelrc
tsconfig.json
webpack.config.js
package.json
複製代碼

一一看一下都配置了些什麼 .babelrc 這裏主要是 plugin 添加了 decorators 的設置webpack

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy" /* should always be the first plugin! */]
}

複製代碼

tsconfig.json 設置編譯時容許 decorators。編輯完此文件後須要重啓編輯器（我用的是 VSCode）git

{
  "compilerOptions": {
      "experimentalDecorators": true,
      "allowJs": true
  }
}
複製代碼

webpack.config.jsgithub

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  mode: 'development',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: ['babel-loader'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ]
  }
};

複製代碼

package.json 定義了 scripts, dependecy 等等web

{
  "name": "score-up",
  "version": "1.0.0",
  "description": "ScoreUp app with Boilerplate for MobX + React project with JSX, ES6 and decorator compilation",
  "main": "main.js",
  "scripts": {
    "start": "webpack-dev-server --hot --open",
    "build": "webpack",
    "lint": "eslint src",
    "electron-start": "electron .",
    "deploy": "gh-pages -b gh-pages -d build"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/mobxjs/mobx-react-boilerplate.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "mobx",
    "starter-kit"
  ],
  "author": "Hao Li <lihaobhsfer@gmail.com> (http://github.com/lihaobhsfer)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/mobxjs/mobx/issues"
  },
  "homepage": "http://lihaobhsfer.github.io/ScoreUp",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "antd": "^3.23.2",
    "electron": "^6.0.9",
    "gh-pages": "^2.1.1",
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "mobx-react-devtools": "^6.0.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router-dom": "^5.0.1"
  }
}
複製代碼