React实践（一）——webpack4搭建开发环境

摘要：按需引入在入口文件中引入全局的如果仅仅是这样的话，我们加载组件是全部加载的，这时候我们要在的中配置这样之后就可以按照的官网来使用里的组件了。啦，这样一个简单的开发环境就搭建好了。

github

npm init

创建src文件夹，再其中新建index.html

安装webpack依赖:
npm install webpack webpack-cli webpack-dev-server --save-dev

配置webpack,根目录下新建webpack.config.js:

module.exports = {
    mode: "development"    // 生产环境为"production"
}

配置命令行:

// package.json
{
    ...
    "script": {
        ...
        "start": "webpack-dev-serve --hot"    
    }
}

利用html-webpack-plugin插件配置自动生成页面和注入打包后的js
npm install html-webpack-plugin --save-dev
webpack.config.js中配置:

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

// 创建插件示例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"),
    filename: "index.html"
})
module.exports = {
    mode: "development",
    plugins: [
        htmlPlugin
    ]
}

npm install react react-dom --save

使用babel转译jsx语法(一定要注意版本)：
npm install babel-core babel-loader@7 babel-plugin-transform-runtime --save-dev
npm install babel-preset-env babel-preset-stage-0 babel-preset-react --save-dev

配置babel

// webpack.config.js
module.exports = {
    ...
    modules: {
        rules: [
            { test: /.js|jsx$/, use: "babel-loader", exclude: /node_modules/ } // 一定要添加exclude排除项
        ]
    },
    resolve: {
        extensions: ["js", "jsx", "json"] // 配置导入模块的后缀名忽略
        alias: {
            "@": path.join(__dirname, "/src") // 配置src路径标识符
        }
    }
}

根目录新建 .babelrc

{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}

cnpm install style-loader css-loader --save-dev
cnpm install sass-loader node-sass -save-dev
cnpm install url-loader file-loader --save-dev

注意在css-loader之后是可以加参数的，格式类似url的query格式：

modules: 开启模块化（只针对类名和id，标签选择器依然是全局）

localIdentName:
2.1 [path]: 相对于src的路径
2.2 [name]: 样式文件名
2.3 [local]: 样式原名
2.4 [hash:8]: 哈希值，8位限制长度

这里我们需要注意的是，我们有可能会用到第三方的样式表，而这时候如果是针对.css文件进行模块化的化，那就用不了了。所以，自己写的样式用sass,进行模块化处理，而全局或者第三方样式表用css。

// webpack.config.js
{
    ...
    modules: {
        rules: [
             // 一定要添加exclude排除项
            { test: /.js|jsx$/, use: "babel-loader", exclude: /node_modules/ },
            { test: /.css$/, use: ["style-loader", "css-loader"]}, 
            // 字体文件打包处理配置
            { test: /.ttf|woff|woff2|eot|svg$/, use: "url-loader"},
            // 打包处理scss并模块化（只针对类名或id，标签选择器不会模块化)
            { test: /.scss$/, use: ["style-loader", "css-loader?modules&localIdentName=[local]-[hash:8]", "sass-loader"]}
      
        ]
    },
}

配置eslint

cnpm install eslint eslint-loader --save-dev

项目根目录新建.eslintrc.js：

module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        // 允许开发环境使用debugger
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
        //禁止使用var
        "no-var": 2,
        // 强制操作符周围有空格
        "space-infix-ops": 2,
        // 语句块之前的空格(大括号之前有空格)
        "space-before-blocks": [2, "always"],
        // 强制在花括号中使用一致的空格
        "object-curly-spacing": [2, "always"],
        // 逗号之后必须有空格
        "comma-spacing": [2, { "before": false, "after": true }],
        // 对象字面量的键值之间的冒号后只有一个空格
        "key-spacing": [2, {"mode": "strict"}],
        // 约定以驼峰法命名
        "camelcase": [2, {"properties": "always"}]
    }
}   

rules里的规则可与eslint官网自由配置，也可以用第三方配置好的插件。
webpack.config.js中的loader中配置：

    { enforce: "pre", test: /.js|jsx$/, use: "eslint-loader", exclude: /node_modules/ },

配置stylelint

cnpm install stylelint stylelint-webpack-plugin --save-dev
项目根目录新建stylelint.config.js

module.exports = {
    defaultServerity: "warning",
    rules: {
        // 禁止使用important
        "declaration-no-important": true,
        // 选择器后的大括号前必须有一个空格
        "block-opening-brace-space-before": "always",
        // url需要加引号
        "function-url-quotes": "always",
        // 禁止空块
        "block-no-empty": true,
        // 取消小于1的小数的前导0
        "number-leading-zero": "never",
        // 禁止小数后的尾随0
        "number-no-trailing-zeros": true,
        // 函数逗号之后必须跟空格
        "function-comma-space-after": "always",
        // 函数逗号前不能加空格
        "function-comma-space-before": "never",
        // 声明的冒号后必须跟空格
        "declaration-colon-space-after": "always",
        // 声明的冒号前禁止空格
        "declaration-colon-space-before": "never",
        // 规定css类名格式(此处为短横线命名法，例如：.m-title)
        "selector-class-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$"
    }
}

同样的道理，规则可以去stylelint官网配置。
webpack.config.js配置:

const StylelintWebpackPlugin = require("stylelint-webpack-plugin")

// 创建stylelint插件示例对象
const stylelintPlugin = new StylelintWebpackPlugin({
    files: ["src/**/*.s?(a|c)ss"]
})

再在plugin中添加就行了。

cnpm install antd --save
cnpm install babel-plugin-import --save-dev

在入口文件中引入全局的css:

import "antd/dist/antd.css"

如果仅仅是这样的话，我们加载react组件是全部加载的，这时候我们要在.babelrc的plugins中配置：

plugins: [["import", { "libraryName": "antd", "style": "css" }]]

这样之后就可以按照antd的官网来使用antd里的组件了。

OK啦，这样一个简单的react开发环境就搭建好了。