搭建前端工程化

在我們日常開發項目時，基本上會采用官方腳手架進行開發。然后使用官方腳手架開發也有缺點：不能很好的自定義一些功能。下面我將總結出來我是如何從零開始搭建前端工程的，希望對大家有所幫助。

1. 工程化的目的

• 前端工程化就是通過流程規范化、標準化提升團隊協作效率
• 通過組件化、模塊化提升代碼質量
• 使用構建工具、自動化工具提升開發效率

2. 工程化開發的流程

• 編譯 => 打包(合并) => 壓縮 (webpack 或者 rollup)
• 代碼檢查 => eslint
• 測試 => jest
• 發包
• 持續繼承

3. 編譯工具的選擇

大的編譯工具主要包括兩種，分別時webpack 和 rollup，下面我們將講解如何配置。

3.1 webpack 配置

const webpack = require("webpack");
// html 的插件，可以指定一個index.html 將對應的js文件插入到頁面中
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
  mode: "development",
  devtool:false,
  entry: "./src/index.tsx",
  output: {
    filename: "[name].[hash].js",
    path: path.join(__dirname, "dist"),
  },
  // webpack5 內置了 webpack-dev-server， 如果5一下的需要單獨安裝
  devServer: {
    hot: true,
    contentBase: path.join(__dirname, "dist"),
    historyApiFallback: {
      index: "./index.html",
    },
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],
    alias: {
      "@": path.resolve("src"), // 這樣配置后 @ 可以指向 src 目錄
    },
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    // webpack 的內置插件。熱更新使用
    new webpack.HotModuleReplacementPlugin()
  ],
};

注意： webpack5 內置了 webpack-dev-server,可以直接使用 webpack server 命令啟動。

3.2 rollup的配置

import ts from 'rollup-plugin-typescript2'; // 解析ts的插件
import {
  nodeResolve
} from '@rollup/plugin-node-resolve'; // 解析第三方模塊的插件
import commonjs from '@rollup/plugin-commonjs'; // 讓第三方非esm模塊支持編譯
import json from 'rollup-plugin-json'; // 支持編譯json
import serve from 'rollup-plugin-serve'; // 啟動本地服務的插件
import path from 'path'

// 區分開發環境
const isDev = process.env.NODE_ENV === 'development'
// rollup 支持es6語法
export default {
  input: 'packages/index.ts',
  output: {
    // amd iife commonjs umd..
    name:'hp',
    format: 'umd', // esm 模塊
    file: path.resolve(__dirname, 'dist/index.js'), // 出口文件
    sourcemap: true, // 根據源碼產生映射文件
  },
  plugins: [
    commonjs({
      include: 'node_modules/**', // Default: undefined
       extensions: ['.js','.ts']
      // exclude: ['node_modules/foo/**', 'node_modules/bar/**'], // Default: undefined
      
    }),
    json({
      // All JSON files will be parsed by default,
      // but you can also specifically include/exclude files
      include: 'node_modules/**',
      // preferConst: true, 
      // namedExports: true // Default: true
    }),
    nodeResolve({ // 第三方文件解析
      browser:true,
      extensions: ['.js', '.ts']
    }),
    ts({
      tsconfig: path.resolve(__dirname, 'tsconfig.json')
    }),
    isDev ? serve({
      openPage: '/public/index.html',
      contentBase: '',
      port: 3000
    }) : null
  ]
}

3.3 編譯typescript文件。

比你ts 兩種方案，一種時基于babel 編譯，一種是基于 tsc 編譯。

基于tsc 編譯

// webpack 中 
// cnpm i typescript ts-loader -D
module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ],
},
  
 // rollup 中
 // cnpm i rollup-plugin-typescript2 -D
  
ts({
      tsconfig: path.resolve(__dirname, 'tsconfig.json')
})
  

基于babel 編譯

分別在 webpack 和 rollup 引入babel 插件

babel 的配置文件

const presets = [
    ['@babel/preset-env', { // 一個預設集合
        // chrome, opera, edge, firefox, safari, ie, ios, android, node, electron
        // targets 和 browerslist 合并取最低版本
        // 啟用更符合規范的轉換，但速度會更慢，默認為 `false`，從目前來看，是更嚴格的轉化，包括一些代碼檢查。
        spec: false,

        // 有兩種模式：normal, loose。其中 normal 更接近 es6 loose 更接近 es5
        loose: false,

        // "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | false, defaults to "commonjs"
        modules: false, // 代表是esm 模塊

        // 打印插件使用情況
        debug: false,
        useBuiltIns: 'usage', // 按需引入
        corejs: { version: 3, proposals: true } // 考慮使用2，還是3
    }],
    ['@babel/preset-typescript', { // ts的配置
        'isTSX': true,
        'allExtensions': true
    }],
    '@vue/babel-preset-jsx'
];
const plugins = [
    '@babel/plugin-syntax-jsx',
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
    // ['@babel/plugin-transform-modules-commonjs'], 支持tree sharking 必須是esm 模塊， 所以刪除此插件
    //  支持裝飾器模式開發  
    ['@babel/plugin-proposal-decorators', { 'legacy': true }],
    ['@babel/plugin-proposal-class-properties', { 'loose': true }],
];

module.exports = {
    presets,
    plugins
};

建議： webpack 在業務中開發推薦使用babel 編譯。 編輯js庫使用tsc編譯。

3.4 ts 配置文件梳理

基本參數

嚴格檢查
**

額外檢查
**

模塊解析檢查
**

sourcemap檢查
**

**
試驗選項
**

試驗選項

tsconfig.json 的基本配置

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "./src/**/*"
  ]
}

ts配置文件梳理完畢。

4. 代碼校驗

4.1 代碼檢查的目的：

• 規范的代碼可以促進團隊合作
• 規范的代碼可以降低維護成本
• 規范的代碼有助于 code review(代碼審查)

4.2 常見的代碼規范文檔

• airbnb中文版
• standard中文版
• 百度前端編碼規范
• styleguide
• CSS編碼規范

4.3 代碼與檢查插件eslint（vscode）

在vscode 商店中搜索 eslint, 然后安裝

image.png

配置生效方式一：(修改vscode 配置)

{
  "eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
}

方式二：給每個單獨的工程增加配置文件

image.png

4.4 安裝模塊

cnpm i eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

4.5 基本配置

• 英文rules
• 中文rules
• 需要添加parserOptions以支持模塊化的寫法

module.exports = {
    "parser":"@typescript-eslint/parser",
    "plugins":["@typescript-eslint"],
    "rules":{
        "no-var":"error",
        "no-extra-semi":"error",
        "@typescript-eslint/indent":["error",2]
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
          "modules": true
        }
    }
}

// package.json
"scripts": {
+  "lint": "eslint --fix  --ext .js,.vue src",
 }

4.6 代碼與檢查

cnpm i husky lint-staged --save-dev

// package.json 

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.js": [
      "eslint --fix",
      "git add"
    ],
    "src/**/*.less": [
      "stylelint --fix",
      "git add"
    ]
  },

5. 單元測試

5.1 安裝與配置

cnpm i jest @types/jest ts-jest jest -D // 依賴包
npx ts-jest config:init // 生成配置文件

// package.json
 "scripts": {
 +  "jest-test": "jest -o",
 +  "jest-coverage": "jest --coverage"
  },

5.2 配置文件展示

module.exports = {
  roots: [
    "<rootDir>/packages"
  ],
  testRegex: 'test/(.+)\\.test\\.(jsx?|tsx?)$',
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

注意： 這里只是簡單的列舉了下需要的東西，和一個夠用的配置。如果要按照具體需求配置的話，需要查看文檔。

6. git提交規范與changelog (發包)

6.1 優點

1. 良好的git commit好處

• 可以加快code review 的流程
• 可以根據git commit 的元數據生成changelog
• 可以讓其它開發者知道修改的原因

6.2 良好的commit

• commitizen是一個格式化commit message的工具

• validate-commit-msg 用于檢查項目的 Commit message 是否符合格式

• conventional-changelog-cli可以從git metadata生成變更日志

• 統一團隊的git commit 標準

• 可以使用angular的git commit日志作為基本規范

  • 提交的類型限制為 feat、fix、docs、style、refactor、perf、test、chore、revert等
  • 提交信息分為兩部分，標題(首字母不大寫，末尾不要加標點)、主體內容(描述修改內容)

• 日志提交友好的類型選擇提示 使用commitize工具

• 不符合要求格式的日志拒絕提交 的保障機制

  • 需要使用validate-commit-msg工具

• 統一changelog文檔信息生成

  • 使用conventional-changelog-cli工具

cnpm i commitizen  validate-commit-msg conventional-changelog-cli -D
commitizen init cz-conventional-changelog --save --save-exact
git cz

使用 git cz 命令：可以很方便的操作。

image.png

6.3 提交的格式

<type>(<scope>):<subject/>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

• 代表某次提交的類型，比如是修復bug還是增加feature
• 表示作用域，比如一個頁面或一個組件
• 主題 ，概述本次提交的內容
• 詳細的影響內容
• 修復的bug和issue鏈接
  | 類型 | 含義 |
  | :--- | :--- |
  | feat | 新增feature |
  | fix | 修復bug |
  | docs | 僅僅修改了文檔，比如README、CHANGELOG、CONTRIBUTE等 |
  | style | 僅僅修改了空格、格式縮進、偏好等信息，不改變代碼邏輯 |
  | refactor | 代碼重構，沒有新增功能或修復bug |
  | perf | 優化相關，提升了性能和體驗 |
  | test | 測試用例，包括單元測試和集成測試 |
  | chore | 改變構建流程，或者添加了依賴庫和工具 |
  | revert | 回滾到上一個版本 |
  | ci | CI 配置，腳本文件等更新 |

6.4 升級package.json 版本

安裝依賴 cnpm install standard-version inquirer shelljs -D

執行腳本：

const inquirer = require('inquirer'); // 命令行交互模塊
const shell = require('shelljs');

if (!shell.which('git')) {
    shell.echo('Sorry, this script requires git');
    shell.exit(1);
}

const getVersion = async() => {
    return new Promise((resolve, reject) => {
        inquirer.prompt([
            {
                type: 'list',
                name: 'version',
                choices: ['patch', 'minor', 'major'],
                message: 'please choose argument [major|minor|patch]: '
            }
        ]).then(answer => {
            resolve(answer.version);
        }).catch(err => {
            reject(err);
        });
    });
};

const main = async() => {
    const version = await getVersion();
    shell.echo(`\nReleasing ${version} ...\n`);
    await shell.exec(`npm run standard-version -- --release-as ${version}`);
};

main();

major：升級主要版本
minor: 升級次要版本
patch：升級補丁版本

6.5 生成CHANGELOG.md

• conventional-changelog-cli 默認推薦的 commit 標準是來自angular項目
• 參數-i CHANGELOG.md表示從 CHANGELOG.md 讀取 changelog
• 參數 -s 表示讀寫 CHANGELOG.md 為同一文件
• 參數 -r 表示生成 changelog 所需要使用的 release 版本數量，默認為1，全部則是0

cnpm i conventional-changelog-cli -D

"scripts": {
    "changelogs": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
}

彩蛋：

你是否在github上見過這樣的release文檔

image.png

安裝 cnpm install gh-release -D

// package.json
 "scripts": {
    "rel": "gh-release"
  },

操作步驟：

1. 使用 git cz 提交代碼。
2. 使用 standard-version 升級版本
3. 使用 changelogs 生成md （注意：這個時候不要提交代碼了）
4. 執行 npm run rel。

就可以得到上面好看的文檔了。

7. 持續集成

繼續集成有很多中不同的方案，實現方式也各有不同，方式：1.Travis CI 。2 jenkins 等。 由于配置比較不復雜這里就不展開說了，具體的可以根據公司的情況，和運維一起進行配置。

結束！！！！