从零搭建 React 开发环境

å‰è¨€

å¤§æ¦‚åœ¨ 2019 å¹´ï¼Œè‡ªå·±æå»º React å¼€å‘çŽ¯å¢ƒçš„æƒ³æ³•èŒèŠ½ï¼Œåˆ°ç›®å‰ä¸ºæ¢ï¼Œå…¬å¸çš„å¾ˆå¤šé¡¹ç›®ä¸Šï¼Œä¹Ÿåœ¨ä½¿ç”¨ä¸ï¼Œæ¯”è¾ƒç¨³å®šã€‚ä¸ºä»€ä¹ˆè¦è‡ªå·±é€ è½®åï¼Ÿèµ·åˆæ˜¯å› ä¸ºè‡ªå·±å¹¶ä¸æ»¡æ„å¸‚é¢ä¸Šçš„è„šæ‰‹æž¶ã€‚å¦å¤–ï¼Œé€ è½®åå¯¹äºŽè‡ªå·±ä¹Ÿæœ‰ä¸€äº›æŠ€æœ¯ä¸Šçš„å¸®åŠ©ï¼Œå¦åˆ«äººäºŒæ¬¡å°è£…çš„ä¸œè¥¿ï¼Œä¸å¦‚ç›´æŽ¥ä½¿ç”¨åº•å±‚çš„åº“ï¼Œè¿™æ ·ä¹Ÿæœ‰åŠ©äºŽè‡ªå·±ç³»ç»Ÿçš„å¦ä¹ ä¸€éçŸ¥è¯†ï¼ŒåºŸè¯ä¸å¤šè¯´ï¼Œç›´æŽ¥è¿›å…¥æ£æ–‡ï¼Œå¦‚ä½•æå»ºè‡ªå·±çš„å¼€å‘çŽ¯å¢ƒã€‚

åˆå§‹åŒ–

åˆ›å»ºæ–‡ä»¶å¤¹å¹¶è¿›å…¥ï¼š

$ mkdir tristana && cd tristana

åˆå§‹åŒ– package.json

$ npm init

å®‰è£… Webpack

$ npm install webpack webpack-cli --save-dev

åˆ›å»ºä»¥ä¸‹ç›®å½•ç»“æž„ã€æ–‡ä»¶å’Œå†…å®¹ï¼š

project

tristana|- package.json|- /dist
   |- index.html|- /script
   |- webpack.config.js|- index.html|- /src
   |- index.js

src/index.js

document.getElementById("root").append("React");

index.html && dist/index.html

    
        
        tristana

script/webpack.config.js

module.exports = {
    mode: "development",
    entry: "./src/index.js",
};

package.json

{    // ...
    "scripts": {        "build": "webpack --mode=development --config script/webpack.config.js"
    },
}

ç„¶åŽæ ¹ç›®å½•ç»ˆç«¯è¾“å…¥ï¼šnpm run build

åœ¨æµè§ˆå™¨ä¸æ‰“å¼€ dist ç›®å½•ä¸‹çš„ index.htmlï¼Œå¦‚æžœä¸€åˆ‡æ£å¸¸ï¼Œä½ åº”è¯¥èƒ½çœ‹åˆ°ä»¥ä¸‹æ–‡æœ¬ï¼š'React'

index.html ç›®å‰æ”¾åœ¨ dist ç›®å½•ä¸‹ï¼Œä½†å®ƒæ˜¯æ‰‹åŠ¨åˆ›å»ºçš„ï¼Œä¸‹é¢ä¼šæ•™ä½ å¦‚ä½•ç”Ÿæˆ index.html è€Œéžæ‰‹åŠ¨ç¼–è¾‘å®ƒã€‚

Webpack æ ¸å¿ƒåŠŸèƒ½

Babel

$ npm install @babel/cli @babel/core babel-loader @babel/preset-env --save-dev

script/webpack.config.js

module.exports = {    // ...
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: "babel-loader",
                exclude: /node_modules/,
            },
        ],
    },
};

.babelrc

åœ¨æ ¹ç›®å½•ä¸‹æ·»åŠ .babelrc æ–‡ä»¶ï¼š

{    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

æ ·å¼

$ npm install style-loader css-loader less less-loader --save-dev

script/webpack.config.js

module.exports = {    // ...    module: {        rules: [
            {                test: /\.(css|less)$/,                use: [
                    {                        loader: "style-loader",
                    },
                    {                        loader: "css-loader",                        options: {                            importLoaders: 1,
                        },
                    },
                    {                        loader: "less-loader",                        lessOptions: {                            javascriptEnabled: true,
                        },
                    },
                ],
            },
        ],
    },
};

å›¾ç‰‡å—ä½“

$ npm install file-loader --save-dev

script/webpack.config.js

module.exports = {    // ...
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                loader: 'file-loader'
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader'
            }
        ],
    },
};

HTML

$ npm install html-webpack-plugin --save-dev

script/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    // ...
    plugins: {
        html: new HtmlWebpackPlugin({
            title: 'tristana',
            template: 'public/index.html'
        }),
    }
};

index.html

    
        
        tristana

å¼€å‘æœåŠ¡

$ npm install webpack-dev-server --save-dev

script/webpack.config.js

const path = require("path");const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    // ...
    devServer: {        contentBase: path.resolve(__dirname, "dist"),        hot: true,        historyApiFallback: true,        compress: true,
    },
};

package.json

{    // ...
    "scripts": {        "start": "webpack serve --mode=development --config script/webpack.config.js"
    },    // ...}

æ¸…ç† dist

$ npm install clean-webpack-plugin --save-dev

script/webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {    // ...
    plugins: {        new CleanWebpackPlugin()
    }
};

Tips

ç”±äºŽ webpack ä½¿ç”¨çš„æ˜¯^5.21.2 ç‰ˆæœ¬ï¼Œåœ¨ä½¿ç”¨è¯¥æ’ä»¶æ—¶ï¼Œä¼šæç¤ºclean-webpack-plugin: options.output.path not defined. Plugin disabled...ï¼Œæš‚æ—¶è¿˜æœªè§£å†³ã€‚

çŽ¯å¢ƒå˜é‡

$ npm install cross-env --save-dev

package.json

{    // ...
    "scripts": {        "start": "cross-env ENV_LWD=development webpack serve  --mode=development --config script/webpack.config.js",        "build": "cross-env ENV_LWD=production webpack --mode=production --config script/webpack.config.js"
    },    // ...}

.jsx æ–‡ä»¶

å®‰è£…ä¾èµ–

$ npm install @babel/preset-react react react-dom --save-dev

.babelrc

{  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

src/App.jsx

åœ¨ src ç›®å½•ä¸‹ï¼Œæ–°å¢ž App.jsx æ–‡ä»¶ï¼š

import React, { Component } from "react";class App extends Component {
    render() {        return (
            
                 Hello, World! 
            
        );
    }
}

export default App;

src/index.js

import React from "react";import ReactDOM from "react-dom";import App from "./App.jsx";
ReactDOM.render(, document.getElementById("root"));

React Router

å®‰è£…ä¾èµ–

$ npm install react-router history --save

src/index.js

import React from "react";import ReactDOM from "react-dom";import { Router, Route, Link } from "react-router";import { createBrowserHistory } from "history";import App from "./App.jsx";const About = () => {    return <>About>;
};

ReactDOM.render(    
        
        
    ,    document.getElementById("root")
);

MobX

å®‰è£…ä¾èµ–

$ npm install mobx mobx-react babel-preset-mobx --save

.babelrc

{  "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"]
}

src/store.js

åœ¨ src ç›®å½•ä¸‹æ–°å»º store.js

import { observable, action, makeObservable } from "mobx";class Store {

    constructor() {
        makeObservable(this);
    }

    @observable
    count = 0;

    @action("add")    add = () => {        this.count = this.count + 1;
    };

    @action("reduce")    reduce = () => {        this.count = this.count - 1;
    };
}export default new Store();

index.js

import { Provider } from "mobx-react";import Store from "./store";// ...ReactDOM.render(    
        
        
        
        
    ,    document.getElementById("root")
);

src/App.jsx

import React, { Component } from "react";import { observer, inject } from "mobx-react";@inject("store")@observerclass App extends Component {    render() {        return (            
                {this.props.store.count}
                
                
            
        );
    }
}export default App;

Ant Design

å®‰è£…ä¾èµ–

$ npm install antd babel-plugin-import --save

.babelrc

{    // ...
    "plugins": [
        [            "import",
            {                "libraryName": "antd",                "libraryDirectory": "es",                "style": true
            }
        ]
    ]
}

src/App.jsx

// ...import { DatePicker } from "antd";import "antd/dist/antd.css";@inject("store")@observerclass App extends Component {
    render() {        return (
            
                
            
        );
    }
}

export default App;

TypeScript

å®‰è£…ä¾èµ–

$ npm install typescript @babel/preset-typescript --save-dev

.babelrc

{    "presets": [        // ...
        "@babel/preset-typescript"
    ]
}

tsconfig.json

åœ¨æ ¹ç›®å½•ä¸‹ï¼Œæ–°å¢ž tsconfig.json æ–‡ä»¶ï¼š

{    "compilerOptions": {        "emitDecoratorMetadata": true,        "experimentalDecorators": true,        "target": "ES5",        "allowSyntheticDefaultImports": true,        "strict": true,        "forceConsistentCasingInFileNames": true,        "allowJs": true,        "outDir": "./dist/",        "esModuleInterop": true,        "noImplicitAny": false,        "sourceMap": true,        "module": "esnext",        "moduleResolution": "node",        "isolatedModules": true,        "importHelpers": true,        "lib": ["esnext", "dom", "dom.iterable"],        "skipLibCheck": true,        "jsx": "react",        "typeRoots": ["node", "node_modules/@types"],        "rootDirs": ["./src"],        "baseUrl": "./src"
    },    "include": ["./src/**/*"],    "exclude": ["node_modules"]
}

src/App.jsx

æ›´æ¢æ–‡ä»¶åŽç¼€ App.jsx -> App.tsx

import React, { Component } from "react";import { observer, inject } from "mobx-react";import { DatePicker } from "antd";import "antd/dist/antd.css";@inject("store")@observerclass App extends Component {    props: any;    render() {        return (            
                
                {this.props.store.count}
                
                
            
        );
    }
}export default App;

ä»£ç è§„èŒƒ

ä»£ç æ ¡éªŒã€ä»£ç æ ¼å¼åŒ–ã€Git æäº¤å‰æ ¡éªŒã€Vscodeé…ç½®ã€ç¼–è¯‘æ ¡éªŒ

ESLint

å®‰è£…ä¾èµ–

$ npm install @typescript-eslint/parser eslint eslint-plugin-standard @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-promise --save-dev

.eslintrc.js

åœ¨æ ¹ç›®å½•ä¸‹ï¼Œæ–°å¢ž .eslintrc.js æ–‡ä»¶ï¼š

module.exports = {    extends: ["eslint:recommended", "plugin:react/recommended"],    env: {        browser: true,        commonjs: true,        es6: true,
    },    globals: {
        $: true,        process: true,        __dirname: true,
    },    parser: "@typescript-eslint/parser",    parserOptions: {        ecmaFeatures: {            jsx: true,            modules: true,
        },        sourceType: "module",        ecmaVersion: 6,
    },    plugins: ["react", "standard", "promise", "@typescript-eslint"],    settings: {        "import/ignore": ["node_modules"],        react: {            version: "latest",
        },
    },    rules: {        quotes: [2, "single"],        "no-console": 0,        "no-debugger": 1,        "no-var": 1,        semi: ["error", "always"],        "no-irregular-whitespace": 0,        "no-trailing-spaces": 1,        "eol-last": 0,        "no-unused-vars": [        1,
        {            vars: "all",            args: "after-used",
        },
        ],        "no-case-declarations": 0,        "no-underscore-dangle": 0,        "no-alert": 2,        "no-lone-blocks": 0,        "no-class-assign": 2,        "no-cond-assign": 2,        "no-const-assign": 2,        "no-delete-var": 2,        "no-dupe-keys": 2,        "use-isnan": 2,        "no-duplicate-case": 2,        "no-dupe-args": 2,        "no-empty": 2,        "no-func-assign": 2,        "no-invalid-this": 0,        "no-redeclare": 2,        "no-spaced-func": 2,        "no-this-before-super": 0,        "no-undef": 2,        "no-return-assign": 0,        "no-script-url": 2,        "no-use-before-define": 2,        "no-extra-boolean-cast": 0,        "no-unreachable": 1,        "comma-dangle": 2,        "no-mixed-spaces-and-tabs": 2,        "prefer-arrow-callback": 0,        "arrow-parens": 0,        "arrow-spacing": 0,        camelcase: 0,        "jsx-quotes": [1, "prefer-double"],        "react/display-name": 0,        "react/forbid-prop-types": [        2,
        {            forbid: ["any"],
        },
        ],        "react/jsx-boolean-value": 0,        "react/jsx-closing-bracket-location": 1,        "react/jsx-curly-spacing": [        2,
        {            when: "never",            children: true,
        },
        ],        "react/jsx-indent": ["error", 4],        "react/jsx-key": 2,        "react/jsx-no-bind": 0,        "react/jsx-no-duplicate-props": 2,        "react/jsx-no-literals": 0,        "react/jsx-no-undef": 1,        "react/jsx-pascal-case": 0,        "react/jsx-sort-props": 0,        "react/jsx-uses-react": 1,        "react/jsx-uses-vars": 2,        "react/no-danger": 0,        "react/no-did-mount-set-state": 0,        "react/no-did-update-set-state": 0,        "react/no-direct-mutation-state": 2,        "react/no-multi-comp": 0,        "react/no-set-state": 0,        "react/no-unknown-property": 2,        "react/prefer-es6-class": 2,        "react/prop-types": 0,        "react/react-in-jsx-scope": 2,        "react/self-closing-comp": 0,        "react/sort-comp": 0,        "react/no-array-index-key": 0,        "react/no-deprecated": 1,        "react/jsx-equals-spacing": 2,
    },
};

.eslintignore

åœ¨æ ¹ç›®å½•ä¸‹ï¼Œæ–°å¢ž .eslintignore æ–‡ä»¶ï¼š

src/assets

.vscode

åœ¨æ ¹ç›®å½•ä¸‹æ–°å¢ž .vscode æ–‡ä»¶å¤¹ï¼Œç„¶åŽæ–°å¢ž .vscode/settings.json

{    "eslint.validate": [        "javascript",        "javascriptreact",        "typescript",        "typescriptreact"
    ]
}

Perttier

å®‰è£…ä¾èµ–

$ npm install prettier --save-dev

prettier.config.js

åœ¨æ ¹ç›®å½•ä¸‹ï¼Œæ–°å¢ž prettier.config.js æ–‡ä»¶ï¼š

module.exports = {    // ä¸€è¡Œæœ€å¤š 100 å—ç¬¦
    printWidth: 100,    // ä½¿ç”¨ 4 ä¸ªç©ºæ ¼ç¼©è¿›
    tabWidth: 4,    // ä¸ä½¿ç”¨ç¼©è¿›ç¬¦ï¼Œè€Œä½¿ç”¨ç©ºæ ¼
    useTabs: false,    // è¡Œå°¾éœ€è¦æœ‰åˆ†å·
    semi: true,    // ä½¿ç”¨å•å¼•å·
    singleQuote: true,    // å¯¹è±¡çš„ key ä»…åœ¨å¿…è¦æ—¶ç”¨å¼•å·
    quoteProps: 'as-needed',    // jsx ä¸ä½¿ç”¨å•å¼•å·ï¼Œè€Œä½¿ç”¨åŒå¼•å·
    jsxSingleQuote: false,    // æœ«å°¾ä¸éœ€è¦é€—å·
    trailingComma: 'none',    // å¤§æ‹¬å·å†…çš„é¦–å°¾éœ€è¦ç©ºæ ¼
    bracketSpacing: true,    // jsx æ ‡ç¾çš„åå°–æ‹¬å·éœ€è¦æ¢è¡Œ
    jsxBracketSameLine: false,    // ç®å¤´å‡½æ•°ï¼Œåªæœ‰ä¸€ä¸ªå‚æ•°çš„æ—¶å€™ï¼Œä¹Ÿéœ€è¦æ‹¬å·
    arrowParens: 'avoid',    // æ¯ä¸ªæ–‡ä»¶æ ¼å¼åŒ–çš„èŒƒå›´æ˜¯æ–‡ä»¶çš„å…¨éƒ¨å†…å®¹
    rangeStart: 0,
    rangeEnd: Infinity,    // ä¸éœ€è¦å†™æ–‡ä»¶å¼€å¤´çš„ @prettier
    requirePragma: false,    // ä¸éœ€è¦è‡ªåŠ¨åœ¨æ–‡ä»¶å¼€å¤´æ’å…¥ @prettier
    insertPragma: false,    // ä½¿ç”¨é»˜è®¤çš„æŠ˜è¡Œæ ‡å‡†
    proseWrap: 'preserve',    // æ ¹æ®æ˜¾ç¤ºæ ·å¼å†³å®š html è¦ä¸è¦æŠ˜è¡Œ
    htmlWhitespaceSensitivity: 'css',    // æ¢è¡Œç¬¦ä½¿ç”¨ lf
    endOfLine: 'lf'};

stylelint

å®‰è£…ä¾èµ–

$ npm install stylelint stylelint-config-standard stylelint-config-prettier --save-dev

stylelint.config.js

åœ¨æ ¹ç›®å½•ä¸‹ï¼Œæ–°å¢ž stylelint.config.js æ–‡ä»¶ï¼š

module.exports = {
    extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
    ignoreFiles: [        '**/*.ts',        '**/*.tsx',        '**/*.png',        '**/*.jpg',        '**/*.jpeg',        '**/*.gif',        '**/*.mp3',        '**/*.json'
    ],
    rules: {        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['extends', 'ignores']
            }
        ],
        indentation: 4,        'number-leading-zero': null,        'unit-allowed-list': ['em', 'rem', 's', 'px', 'deg', 'all', 'vh', '%'],        'no-eol-whitespace': [
            true,
            {
                ignore: 'empty-lines'
            }
        ],        'declaration-block-trailing-semicolon': 'always',        'selector-pseudo-class-no-unknown': [
            true,
            {
                ignorePseudoClasses: ['global']
            }
        ],        'block-closing-brace-newline-after': 'always',        'declaration-block-semicolon-newline-after': 'always',        'no-descending-specificity': null,        'selector-list-comma-newline-after': 'always',        'selector-pseudo-element-colon-notation': 'single'
    }
};

lint-stagedã€pre-commit

å®‰è£…ä¾èµ–

$ npm install lint-staged prettier eslint pre-commit --save-dev

package.json

{    // ...
    "scripts": {        "lint:tsx": "eslint --ext .tsx src && eslint --ext .ts src",        "lint:css": "stylelint --aei .less .css src",        "precommit": "lint-staged",        "precommit-msg": "echo 'Pre-commit checks...' && exit 0"
    },    "pre-commit": [        "precommit",        "precommit-msg"
    ],    "lint-staged": {        "*.{js,jsx,ts,tsx}": [            "eslint --fix",            "prettier --write",            "git add"
        ],        "*.{css,less}": [            "stylelint --fix",            "prettier --write",            "git add"
        ]
    }
}

eslint-webpack-plugin

å®‰è£…ä¾èµ–

$ npm install eslint-webpack-plugin --save-dev

script/webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin');module.exports = {    // ...
    plugins: [new ESLintPlugin()],
};

æ€»ç»“

æå»ºè¿™ä¸ªçš„è¿‡ç¨‹ï¼Œä¹Ÿæ˜¯é‡åˆ°äº†ä¸å°‘å‘ï¼Œæ”¶èŽ·ä¹Ÿæ˜¯è›®å¤šçš„ï¼Œå¸Œæœ›è¿™ä¸ªæ•™ç¨‹èƒ½å¤Ÿå¸®åŠ©æ›´å¤šçš„åŒå¦ï¼Œå°‘é‡‡ç‚¹å‘ï¼Œå®Œæ•´çš„ React å¼€å‘çŽ¯å¢ƒå¯ä»¥çœ‹è¿™ä¸ªtristanaï¼Œæ±‚ç‚¹èµžï¼Œæ±‚å…³æ³¨ï¼

产品

案例

文档

从零搭建 React 开发环境

å‰è¨€

åˆå§‹åŒ–

project

src/index.js

index.html && dist/index.html

script/webpack.config.js

package.json

Webpack æ ¸å¿ƒåŠŸèƒ½

Babel

script/webpack.config.js

.babelrc

æ ·å¼

script/webpack.config.js

å›¾ç‰‡å­—ä½“

script/webpack.config.js

HTML

script/webpack.config.js

index.html

å¼€å‘æœåŠ¡

script/webpack.config.js

package.json

æ¸…ç† dist

script/webpack.config.js

Tips

çŽ¯å¢ƒå˜é‡

package.json

.jsx æ–‡ä»¶

å®‰è£…ä¾èµ–

.babelrc

src/App.jsx

Hello, World!

src/index.js

React Router

å®‰è£…ä¾èµ–

src/index.js

MobX

å®‰è£…ä¾èµ–

.babelrc

src/store.js

index.js

src/App.jsx

Ant Design

å®‰è£…ä¾èµ–

.babelrc

src/App.jsx

TypeScript

å®‰è£…ä¾èµ–

.babelrc

tsconfig.json

src/App.jsx

ä»£ç è§„èŒƒ

ESLint

å®‰è£…ä¾èµ–

.eslintrc.js

.eslintignore

.vscode

Perttier

å®‰è£…ä¾èµ–

prettier.config.js

stylelint

å®‰è£…ä¾èµ–

stylelint.config.js

lint-stagedã€pre-commit

å®‰è£…ä¾èµ–

package.json

eslint-webpack-plugin

å®‰è£…ä¾èµ–

script/webpack.config.js

æ€»ç»“

相关推荐

注册享福利、赢好礼

å‰è¨€

åˆå§‹åŒ–

æ ·å¼

å›¾ç‰‡å—ä½“

å¼€å‘æœåŠ¡

æ¸…ç† dist

çŽ¯å¢ƒå˜é‡

å®‰è£…ä¾èµ–

å®‰è£…ä¾èµ–

å®‰è£…ä¾èµ–

å®‰è£…ä¾èµ–

å®‰è£…ä¾èµ–

ä»£ç è§„èŒƒ

å®‰è£…ä¾èµ–

å®‰è£…ä¾èµ–

å®‰è£…ä¾èµ–

lint-stagedã€pre-commit

å®‰è£…ä¾èµ–

å®‰è£…ä¾èµ–