給本身搭個腳手架

時間 2019-11-06

標籤本身腳手架简体版

原文原文鏈接

背景

想作個測試或者某個東西的demo，須要新建一個項目。若是從 0 開始，要配置一大堆東西，耗時長；若是直接用如今流行的一些腳手架，如vue-cli等，黑箱操做，你須要閱讀文檔，也很難全局看清裏面到底有哪些內容...
在某個項目裏，新建一個組件，其實有些固定的文件都要建，如xxx.js,xxx.html,xxx.css，更有可能有些固定內容，須要手工複製過來...
平時作的項目都是在架子裏面堆砌內容，沒試過構建等內容的配置...

本文目的

提升生產力，將一些可複用的東西複用起來
動手作一個本身的腳手架，熟悉構建配置，熟悉腳手架開發

腳手架編寫

工具css

commander 命令編寫，如 init
chalk 讓輸出帶顏色
download-git-repo，下載模版
inquirer 命令行交互，獲取用戶輸入
ora 進度條
log-symbols 輸出一些標誌，如√
handlebars 模板引擎，更復雜或高級點的能夠用 metalsmith 配合操做

步驟html

執行 init 命令
於用戶交互，讓用戶輸入項目描述、做者等信息
根據用戶輸入，下載對應的模板文件
根據用戶輸入的信息替換模板文件的對應內容
完成

代碼前端

代碼不貼了，能夠到 create-repo-cli 參考vue

以webpack爲構建工具的常見項目配置

注意：全部構建類相關的都應該安裝到 devDependencies 下，即安裝時加上 --save-devwebpack

webpack

這裏就不一一列出全部功能的配置了，只寫一些優化類的配置。想知道全部配置的，能夠直接移步到 webpack-project-templategit

webpack-merge

將開發環境、生產環境、ssr的配置分開文件寫，易於維護。將共同的部分抽離出來，再經過 webpack-merge來merge抽離出來的部分。例：github

const merge = require('webpack-merge')
const base = require('./webpack.base.config')

const dev = {...}
module.exports = merge(base, dev)
複製代碼

copy-webpack-plugin

將單個文件或整個目錄複製到構建目錄。適合用於拷貝一些靜態資源，如圖片等web

const CopyPlugin = require('copy-webpack-plugin')

new CopyPlugin([
    { from: path.resolve(__dirname, 'public'), to: '../dist/public' }
  ]),
複製代碼

mini-css-extract-plugin

將CSS提取爲獨立的文件的插件，對每一個包含css的js文件都會建立一個CSS文件，支持按需加載css和sourceMap.vue-cli

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

new MiniCssExtractPlugin({
    filename: 'chunk.[name].[contenthash:8].css',
  }),
複製代碼

friendly-errors-webpack-plugin

Webpack 進行默認編譯時會有不少無用的信息，須要進行清理，只顯示少許信息，並便於排錯。使用這個插件，能夠幫助清理 console 的信息。也能夠自定義錯誤處理回調等npm

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

new FriendlyErrorsWebpackPlugin(),
複製代碼

happypack

進行多線程構建，提升構建速度

const HappyPack = require('happypack')
const os = require('os')

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
new HappyPack({
    id: 'babel',
    loaders: ['cache-loader', 'babel-loader?cacheDirectory'],
    threadPool: happyThreadPool,
}),
複製代碼

speed-measure-webpack-plugin

構建各路程的測速，如loader、plugin消耗的時間，能夠經過看消耗的時間來針對性地進行一些優化...

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

module.exports = smp.wrap(merge(base, dev))
複製代碼

eslint

代碼規範是必須的。這裏用 eslint 也支持了檢查 ts 類型，畢竟 tslint 已經中止維護了，且官方也推薦用 eslint 進行約束。業界有好幾個挺標準的規範，如airbnb等。這裏，我是繼承了 eslint-config-airbnb 再進行一些小修改。如過直接使用，這樣就OK了：

//.eslintrc.js
module.exports = {
    extends: ['eslint-config-airbnb'],
}
複製代碼

Commitlint

統一規範 commit 格式，讓 commit 信息整整齊齊的展現安裝 commitlint 、@commitlint/cli、@commitlint/config-conventional

//package.json
"pre-commit": [
    "lint"
  ],
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e .git/COMMIT_EDITMSG"
    }
  }
//commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'scope-empty': [0],
  },
}
複製代碼