React實踐(一)——webpack4搭建開發環境

githubcss

一、建立基本目錄結構

  • npm init
  • 建立src文件夾,再其中新建index.html
  • 安裝webpack依賴:
    npm install webpack webpack-cli webpack-dev-server --save-dev
  • 配置webpack,根目錄下新建webpack.config.js:html

    module.exports = {
        mode: "development"    // 生產環境爲"production"
    }
  • 配置命令行:node

    // package.json
    {
        ...
        "script": {
            ...
            "start": "webpack-dev-serve --hot"    
        }
    }
  • 利用html-webpack-plugin插件配置自動生成頁面和注入打包後的js
    npm install html-webpack-plugin --save-dev
    webpack.config.js中配置:react

    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
        ]
    }

二、搭建react開發環境

2.一、react配置

  • 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
  • 配置babelwebpack

    // 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路徑標識符
            }
        }
    }
  • 根目錄新建 .babelrcgit

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

2.2 配置sass-loader, css-loader以及其餘loader:

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

注意在css-loader以後是能夠加參數的,格式相似url的query格式:web

  1. modules: 開啓模塊化(只針對類名和id,標籤選擇器依然是全局)
  2. localIdentName:
    2.1 [path]: 相對於src的路徑
    2.2 [name]: 樣式文件名
    2.3 [local]: 樣式原名
    2.4 [hash:8]: 哈希值,8位限制長度

這裏咱們須要注意的是,咱們有可能會用到第三方的樣式表,而這時候若是是針對.css文件進行模塊化的化,那就用不了了。因此,本身寫的樣式用sass,進行模塊化處理,而全局或者第三方樣式表用css。npm

// 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']}
      
        ]
    },
}

2.3 配置eslint、stylelint

配置eslint

cnpm install eslint eslint-loader --save-devjson

項目根目錄新建.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中添加就好了。

三、按需引入antd

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開發環境就搭建好了。

相關文章
相關標籤/搜索