搭建自己的前端腳手架
一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。搭建腳手架可以用 create-react-app、vue-cli、yeoman 等命令行工具，也可以直接用 html5-boilerplate、react-boilerplate、hackathon-starter 等模板，如果這些都不能滿足你的個性化需求，可以嘗試搭建自己的前端腳手架。
一般來說，腳手架包括目錄結(jié)構(gòu)定義、必要的項目配置文件與工具配置文件、工具與命令。
一個基本的腳手架：
|-- / 項目根目錄
|-- 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 配置文件
一些擴展的腳手架：
|-- / 項目根目錄
|-- 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": {} 開發(fā)依賴
}
1.1 main: 項目入口文件
如果你將當前的項目發(fā)布為一個 npm 包，而其他的包在引用你的包時，構(gòu)建工具就會去找 main 字段定義的入口文件，詳細參考 package.json#main。
還有其他的特殊的入口文件，參考 package.json 非官方字段集合。
1.2 bin: 配置命令行可執(zhí)行文件
如果你需要將當前的項目安裝成一個全局的命令，那么就需要指定這個字段。
詳細信息參考 package.json#bin。
1.3 scripts: 配置項目命令
這里定義的命令可以用 npm run 來調(diào)用。比如上面定義的幾個命令：
npm run prettier
npm run eslint
npm run eslint:fix
npm run stylelint
npm run stylelint:fix
一般來說，還可能定義如下的一些命令：
{
"test": "", 測試
"build": "", 構(gòu)建
"dev": "", 開發(fā)
...
}
2. README.md: 項目說明文件
項目說明的入口文件，包括文檔。一般 git 項目 web 端首頁顯示的就是這個文件的內(nèi)容，包括 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 個，所以就需要用這個文件來統(tǒng)一配置編輯器。
比如:
# 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。
6. .npmrc: npm 配置文件
比如:
package-lock=false
詳細信息參考 https://www.npmjs.com.cn/files/npmrc/。
7. .npmignore: npm 忽略配置文件
詳細信息參考 keeping-files-out-of-your-package。
8. .eslintrc, .eslintignore: eslint 相關(guān)配置文件
用于 js, jsx 代碼檢查與矯正，讓你編寫的代碼符合特定的規(guī)范與風格。
詳細信息參考 https://eslint.org/。
9. .stylelintrc, .stylelintignore: stylelint 相關(guān)配置文件
用于 css, less, scss 代碼檢查與矯正，讓你編寫的代碼符合特定的規(guī)范與風格。
詳細信息參考 https://stylelint.io/。
10. .prettierrc, .prettierignore: prettier 相關(guān)配置文件
優(yōu)化 js, jsx, css, less, scss, md, json 等文件的格式。
詳細信息參考 https://prettier.io/。
11. .babelrc: babel 配置文件
es6 -> es5 轉(zhuǎn)碼。
詳細信息參考 https://babeljs.io/。
12. webpack.config.js: webpack 配置文件
前端打包工具。
詳細信息參考 https://webpack.js.org/。
13. rollup.config.js: rollup 配置文件
另一個前端打包工具。
詳細信息參考 https://rollupjs.org/。
14. gulpfile.js: gulp 配置文件
前端文件流操作構(gòu)建工具。
詳細信息參考 https://www.gulpjs.com/。
15. jest.config.js: jest 配置文件
前端測試組件。
詳細信息參考 https://jestjs.io/。
16. .gitattributes: git 屬性配置
詳細信息參考 https://git-scm.com/docs/gitattributes。
17. .travis.yml: travis 配置文件
一個持續(xù)集成服務。
詳細信息參考 https://www.travis-ci.org/。
18. appveyor.yml: appveyor 配置文件
又一個持續(xù)集成服務。
詳細信息參考 https://www.appveyor.com/。
19. 后續(xù)
更多博客，查看 https://github.com/senntyou/blogs
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
