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

骑猪看日落 2023-06-12 05:25 20阅读 0赞

# 搭建自己的前端脚手架 #

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

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

一个基本的脚手架：

一些扩展的脚手架：

## 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_main]。

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

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

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

详细信息参考 [package.json\#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/][https_www.markdownguide.org]。

## 3. `CHANGELOG.md`: 版本更新记录 ##

一般项目都会有这个文件，用于记录版本更新及相应的功能变化，比如 [react 的 CHANGELOG][react _ CHANGELOG]。

文件格式也是 `markdown`。

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

用于指定哪些文件或目录不需要进行 git 版本控制。

比如:

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

详细信息参考 [https://git-scm.com/docs/gitignore][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][http_editorconfig.org]。

## 6. `.npmrc`: npm 配置文件 ##

比如:

package-lock=false

详细信息参考 [https://www.npmjs.com.cn/files/npmrc/][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/][https_eslint.org]。

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

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

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

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

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

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

## 11. `.babelrc`: babel 配置文件 ##

`es6 -> es5` 转码。

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

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

前端打包工具。

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

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

另一个前端打包工具。

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

## 14. `gulpfile.js`: gulp 配置文件 ##

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

详细信息参考 [https://www.gulpjs.com/][https_www.gulpjs.com]。

## 15. `jest.config.js`: jest 配置文件 ##

前端测试组件。

详细信息参考 [https://jestjs.io/][https_jestjs.io]。

## 16. `.gitattributes`: git 属性配置 ##

详细信息参考 [https://git-scm.com/docs/gitattributes][https_git-scm.com_docs_gitattributes]。

## 17. `.travis.yml`: travis 配置文件 ##

一个持续集成服务。

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

## 18. `appveyor.yml`: appveyor 配置文件 ##

又一个持续集成服务。

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

## 19. 后续 ##

作者：senntyou  
链接：https://www.jianshu.com/p/f33b507a0b04  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[create-react-app]: https://github.com/facebook/create-react-app
[vue-cli]: https://github.com/vuejs/vue-cli
[yeoman]: http://yeoman.io/
[html5-boilerplate]: https://github.com/h5bp/html5-boilerplate
[react-boilerplate]: https://github.com/react-boilerplate/react-boilerplate
[hackathon-starter]: https://github.com/sahat/hackathon-starter
[package.json_main]: https://docs.npmjs.com/files/package.json#main
[package.json]: https://github.com/senntyou/blogs/blob/master/extend/3.md
[package.json_bin]: https://docs.npmjs.com/files/package.json#bin
[github]: https://github.com
[bitbucket]: https://bitbucket.org/
[gitlab]: https://gitlab.com/
[markdown]: https://daringfireball.net/projects/markdown/
[https_www.markdownguide.org]: https://www.markdownguide.org/
[react _ CHANGELOG]: https://github.com/facebook/react/blob/master/CHANGELOG.md
[https_git-scm.com_docs_gitignore]: https://git-scm.com/docs/gitignore
[http_editorconfig.org]: http://editorconfig.org
[https_www.npmjs.com.cn_files_npmrc]: https://www.npmjs.com.cn/files/npmrc/
[keeping-files-out-of-your-package]: https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package
[https_eslint.org]: https://eslint.org/
[https_stylelint.io]: https://stylelint.io/
[https_prettier.io]: https://prettier.io/
[https_babeljs.io]: https://babeljs.io/
[https_webpack.js.org]: https://webpack.js.org/
[https_rollupjs.org]: https://rollupjs.org/
[https_www.gulpjs.com]: https://www.gulpjs.com/
[https_jestjs.io]: https://jestjs.io/
[https_git-scm.com_docs_gitattributes]: https://git-scm.com/docs/gitattributes
[https_www.travis-ci.org]: https://www.travis-ci.org/
[https_www.appveyor.com]: https://www.appveyor.com/