前端进阶（13） - 搭建自己的前端脚手架

搭建自己的前端脚手架

一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用 create-react-app、vue-cli、yeoman 等命令行工具，也可以直接用 html5-boilerplate、react-boilerplate、hackathon-starter 等模板，如果这些都不能满足你的个性化需求，可以尝试搭建自己的前端脚手架。

一般来说，脚手架包括目录结构定义、必要的项目配置文件与工具配置文件、工具与命令。

一个基本的脚手架：

|-- /                              项目根目录
    |-- 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": {}               开发依赖
}

1.1 main: 项目入口文件

如果你将当前的项目发布为一个 npm 包，而其他的包在引用你的包时，构建工具就会去找 main 字段定义的入口文件，详细参考 package.json#main。

还有其他的特殊的入口文件，参考 package.json 非官方字段集合。

1.2 bin: 配置命令行可执行文件

如果你需要将当前的项目安装成一个全局的命令，那么就需要指定这个字段。

详细信息参考 package.json#bin。

1.3 scripts: 配置项目命令

这里定义的命令可以用 npm run 来调用。比如上面定义的几个命令：

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

一般来说，还可能定义如下的一些命令：

{
  "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。

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 相关配置文件

用于 js, jsx 代码检查与矫正，让你编写的代码符合特定的规范与风格。

详细信息参考 https://eslint.org/。

9. .stylelintrc, .stylelintignore: stylelint 相关配置文件

用于 css, less, scss 代码检查与矫正，让你编写的代码符合特定的规范与风格。

详细信息参考 https://stylelint.io/。

10. .prettierrc, .prettierignore: prettier 相关配置文件

优化 js, jsx, css, less, scss, md, json 等文件的格式。

详细信息参考 https://prettier.io/。

11. .babelrc: babel 配置文件

es6 -> es5 转码。

详细信息参考 https://babeljs.io/。

12. webpack.config.js: webpack 配置文件

前端打包工具。

详细信息参考 https://webpack.js.org/。

13. rollup.config.js: rollup 配置文件

另一个前端打包工具。

详细信息参考 https://rollupjs.org/。

14. gulpfile.js: gulp 配置文件

前端文件流操作构建工具。

详细信息参考 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 配置文件

一个持续集成服务。

详细信息参考 https://www.travis-ci.org/。

18. appveyor.yml: appveyor 配置文件

又一个持续集成服务。

详细信息参考 https://www.appveyor.com/。

19. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）