React + MobX + Electron + Node.js + MongoDB 全栈项目开发实践(二)允许 decorator

655 阅读2分钟

主要内容

  • 配置 MobX,从 create-react-app 切换至 Webpack + Babel,以允许使用 decorator

切换脚手架

一开始为了方便,沿用以前的办法使用了官方的 create-react-app。尝试使用 Mobx 的 decoration 时报错,发现 create-react-app 不支持使用 decoration。在网上找了一些文章,尝试使用了 npm eject 等东拼西凑的方法,总是会有报错。后来在 Mobx 官方文档里找到了一些推荐的样板,下下来体验了一下,学习一下他们的配置。

配置文件们(位于项目根目录)

.babelrc
tsconfig.json
webpack.config.js
package.json

一一看一下都配置了些什么 .babelrc 这里主要是 plugin 添加了 decorators 的设置

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

tsconfig.json 设置编译时允许 decorators。编辑完此文件后需要重启编辑器(我用的是 VSCode)

{
  "compilerOptions": {
      "experimentalDecorators": true,
      "allowJs": true
  }
}

webpack.config.js

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 等等

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

这些都配置好之后,再次运行 yarn installyarn start 重新安装依赖,重启项目,就可以看到允许使用 decorator 了。

参考网页

模板合集 github.com/mobxjs/awes… 使用 Webpack Babel github.com/mobxjs/mobx…

系列文章

React + MobX + Electron + Node.js + MongoDB 全栈项目开发实践(零)前言 React + MobX + Electron + Node.js + MongoDB 全栈项目开发实践(一)