前端進階（13） - 搭建本身的前端腳手架

時間 2019-11-05

標籤前端進階搭建本身腳手架简体版

原文原文鏈接

搭建本身的前端腳手架

通常新開發一個項目時，咱們會首先搭建好一個腳手架，而後纔會開始寫代碼。搭建腳手架能夠用 create-react-app、vue-cli、yeoman 等命令行工具，也能夠直接用 html5-boilerplate、react-boilerplate、hackathon-starter 等模板，若是這些都不能知足你的個性化需求，能夠嘗試搭建本身的前端腳手架。css

通常來講，腳手架包括目錄結構定義、必要的項目配置文件與工具配置文件、工具與命令。html

一個基本的腳手架：前端

|-- /                              項目根目錄
    |-- src/                       源代碼目錄
    |-- package.json               npm 項目文件
    |-- README.md                  項目說明文件
    |-- CHANGELOG.md               版本更新記錄
    |-- .gitignore                 git 忽略配置文件
    |-- .editorconfig              編輯器配置文件
    |-- .npmrc                     npm 配置文件
    |-- .npmignore                 npm 忽略配置文件
    |-- .eslintrc                  eslint 配置文件
    |-- .eslintignore              eslint 忽略配置文件
    |-- .stylelintrc               stylelint 配置文件
    |-- .stylelintignore           stylelint 忽略配置文件
    |-- .prettierrc                prettier 配置文件
    |-- .prettierignore            prettier 忽略配置文件
    
    |-- .babelrc                   babel 配置文件
    |-- webpack.config.js          webpack 配置文件
    |-- rollup.config.js           rollup 配置文件
    |-- gulpfile.js                gulp 配置文件

一些擴展的腳手架：vue

|-- /                              項目根目錄
    |-- bin/                       bin 目錄
    |-- test/                      測試目錄
    |-- docs/                      文檔目錄
    |-- jest.config.js             jest 配置文件
    |-- .gitattributes             git 屬性配置
    |-- .travis.yml                travis 配置文件
    |-- appveyor.yml               appveyor 配置文件

1. `package.json`: npm 項目文件

{
  "name": "name",                  項目名字
  "version": "0.0.1",              版本
  "main": "index.js",              入口文件
  "bin": "bin/bin.js",             bin 文件
  "description": "description",    描述
  "repository": {                  
    "type": "git",
    "url": "url"
  },
  "keywords": [],
  "homepage": "homepage",          主頁
  "readmeFilename": "README.md",
  "devDependencies": {             工具依賴
    "babel-eslint": "^8.2.6",
    "eslint": "^4.19.1",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.0",
    "prettier": "^1.14.0",
    "stylelint": "^9.3.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.0",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.10.0",
    "stylelint-config-prettier": "^3.3.0",
    "stylelint-config-standard": "^18.2.0"
  },
  "scripts": {                     能夠添加更多命令
    "precommit": "npm run lint-staged",
    "prettier": "prettier --write \"./**/*.{js,jsx,css,less,md,json}\"",
    "eslint": "eslint .",
    "eslint:fix": "eslint . --fix",
    "stylelint": "stylelint \"./**/*.{css,less}\"",
    "stylelint:fix": "stylelint \"./**/*.{css,less}\" --fix",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {                 對提交的代碼進行檢查與矯正
    "**/*.{js,jsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "**/*.{css,less}": [
      "stylelint --fix",
      "prettier --write",
      "git add"
    ],
    "**/*.{md,json}": [
      "prettier --write",
      "git add"
    ]
  },
  "engines": {                     運行時對 node 版本的要求
    "node": ">=8.0.0"
  },
  "dependencies": {}               開發依賴
}

1.1 `main`: 項目入口文件

若是你將當前的項目發佈爲一個 npm 包，而其餘的包在引用你的包時，構建工具就會去找 main 字段定義的入口文件，詳細參考 package.json#main。html5

還有其餘的特殊的入口文件，參考 package.json 非官方字段集合。node

1.2 `bin`: 配置命令行可執行文件

若是你須要將當前的項目安裝成一個全局的命令，那麼就須要指定這個字段。react

詳細信息參考 package.json#bin。webpack

1.3 `scripts`: 配置項目命令

這裏定義的命令能夠用 npm run 來調用。好比上面定義的幾個命令：git

npm run prettier
npm run eslint
npm run eslint:fix
npm run stylelint
npm run stylelint:fix

通常來講，還可能定義以下的一些命令：es6

{
  "test": "",                      測試  
  "build": "",                     構建
  "dev": "",                       開發
  ...
}

2. `README.md`: 項目說明文件

項目說明的入口文件，包括文檔。通常 git 項目 web 端首頁顯示的就是這個文件的內容，包括 github、bitbucket、gitlab。

文件格式是 markdown，具體介紹與語法能夠參考 https://www.markdownguide.org/。

3. `CHANGELOG.md`: 版本更新記錄

通常項目都會有這個文件，用於記錄版本更新及相應的功能變化，好比 react 的 CHANGELOG。

文件格式也是 markdown。

4. `.gitignore`: git 忽略配置文件

用於指定哪些文件或目錄不須要進行 git 版本控制。

好比:

.DS_STORE
node_modules
build/
*.log*
.idea
.vscode

詳細信息參考 https://git-scm.com/docs/gitignore。

5. `.editorconfig`: 編輯器配置文件

用於指定編輯器特定的配置。好比，不一樣的編輯器對 tab 的定義不同，多是 2 個空格，也多是 4 個或者 8 個，因此就須要用這個文件來統一配置編輯器。

好比:

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

詳細信息參考 http://editorconfig.org。