一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用 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 配置文件如果你将当前的项目发布为一个 npm 包，而其他的包在引用你的包时，构建工具就会去找 main 字段定义的入口文件，详细参考 package.json#main。
还有其他的特殊的入口文件，参考 package.json 非官方字段集合。
如果你需要将当前的项目安装成一个全局的命令，那么就需要指定这个字段。
详细信息参考 package.json#bin。
这里定义的命令可以用 npm run 来调用。比如上面定义的几个命令：
npm run prettier npm run eslint npm run eslint:fix npm run stylelint npm run stylelint:fix一般来说，还可能定义如下的一些命令：
{ "test": "", 测试 "build": "", 构建 "dev": "", 开发 ... }项目说明的入口文件，包括文档。一般 git 项目 web 端首页显示的就是这个文件的内容，包括 github、bitbucket、gitlab。
文件格式是 markdown，具体介绍与语法可以参考 https://www.markdownguide.org/。
一般项目都会有这个文件，用于记录版本更新及相应的功能变化，比如 react 的 CHANGELOG。
文件格式也是 markdown。
用于指定哪些文件或目录不需要进行 git 版本控制。
比如:
.DS_STORE node_modules build/ *.log* .idea .vscode详细信息参考 https://git-scm.com/docs/gitignore。
用于指定编辑器特定的配置。比如，不同的编辑器对 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。
比如:
package-lock=false详细信息参考 https://www.npmjs.com.cn/files/npmrc/。
详细信息参考 keeping-files-out-of-your-package。
用于 js, jsx 代码检查与矫正，让你编写的代码符合特定的规范与风格。
详细信息参考 https://eslint.org/。
用于 css, less, scss 代码检查与矫正，让你编写的代码符合特定的规范与风格。
详细信息参考 https://stylelint.io/。
优化 js, jsx, css, less, scss, md, json 等文件的格式。
详细信息参考 https://prettier.io/。
es6 -> es5 转码。
详细信息参考 https://babeljs.io/。
前端打包工具。
详细信息参考 https://webpack.js.org/。
另一个前端打包工具。
详细信息参考 https://rollupjs.org/。
前端文件流操作构建工具。
详细信息参考 https://www.gulpjs.com/。
前端测试组件。
详细信息参考 https://jestjs.io/。
详细信息参考 https://git-scm.com/docs/gitattributes。
一个持续集成服务。
详细信息参考 https://www.travis-ci.org/。
又一个持续集成服务。
详细信息参考 https://www.appveyor.com/。
作者：senntyou 链接：https://www.jianshu.com/p/f33b507a0b04 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
