The main content

  • Configure MobX to switch from create-React-app to Webpack + Babel to allow the use of decorators

Switching scaffold

At first, for convenience, the official create-React-app was used as before. Error: Create-react-app does not support decoration. I found some articles on the Internet and tried to use a patchwork method like NPM eject, and always got an error. Later I found some recommended templates in the official Mobx documentation and went down to try them out and learn about their configuration.

Configuration files (in the project root directory)

.babelrc
tsconfig.json
webpack.config.js
package.json
Copy the code

Take a look at what is configured. Babelrc is a plugin that adds decorators Settings

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

Copy the code

Tsconfig. json sets compile time to allow decorators. After editing this file, you need to restart the editor (I used VSCode)

{
  "compilerOptions": {
      "experimentalDecorators": true."allowJs": true}}Copy the code

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'],},]}};Copy the code

Package. json defines scripts, dependecy, and so on

{
  "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 <[email protected]> (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 requires."mobx-react-devtools": "^ the 6.0.1." "."react": "^ 16.4.1"."react-dom": "^ 16.4.1"."react-router-dom": "^ 5.0.1." "}}Copy the code

Once this is configured, run YARN Install and YARN Start again to reinstall the dependencies, restart the project, and you can see that the decorator is allowed.

Refer to page

Template collection github.com/mobxjs/awes… Use Webpack Babel github.com/mobxjs/mobx…

series

React + MobX + Electron + node.js + MongoDB full stack development practice (0)