通常新开发一个项目时,咱们会首先搭建好一个脚手架,而后才会开始写代码。搭建脚手架能够用 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 配置文件
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": {} 开发依赖 }
main
: 项目入口文件若是你将当前的项目发布为一个 npm 包,而其余的包在引用你的包时,构建工具就会去找 main
字段定义的入口文件,详细参考 package.json#main。html5
还有其余的特殊的入口文件,参考 package.json 非官方字段集合。node
bin
: 配置命令行可执行文件若是你须要将当前的项目安装成一个全局的命令,那么就须要指定这个字段。react
详细信息参考 package.json#bin。webpack
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": "", 开发 ... }
README.md
: 项目说明文件项目说明的入口文件,包括文档。通常 git 项目 web 端首页显示的就是这个文件的内容,包括 github、bitbucket、gitlab。
文件格式是 markdown,具体介绍与语法能够参考 https://www.markdownguide.org/。
CHANGELOG.md
: 版本更新记录通常项目都会有这个文件,用于记录版本更新及相应的功能变化,好比 react 的 CHANGELOG。
文件格式也是 markdown
。
.gitignore
: git 忽略配置文件用于指定哪些文件或目录不须要进行 git 版本控制。
好比:
.DS_STORE node_modules build/ *.log* .idea .vscode
详细信息参考 https://git-scm.com/docs/gitignore。
.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。
.npmrc
: npm 配置文件好比:
package-lock=false
详细信息参考 https://www.npmjs.com.cn/files/npmrc/。
.npmignore
: npm 忽略配置文件详细信息参考 keeping-files-out-of-your-package。
.eslintrc, .eslintignore
: eslint 相关配置文件用于 js, jsx
代码检查与矫正,让你编写的代码符合特定的规范与风格。
详细信息参考 https://eslint.org/。
.stylelintrc, .stylelintignore
: stylelint 相关配置文件用于 css, less, scss
代码检查与矫正,让你编写的代码符合特定的规范与风格。
详细信息参考 https://stylelint.io/。
.prettierrc, .prettierignore
: prettier 相关配置文件优化 js, jsx, css, less, scss, md, json
等文件的格式。
详细信息参考 https://prettier.io/。
.babelrc
: babel 配置文件es6 -> es5
转码。
详细信息参考 https://babeljs.io/。
webpack.config.js
: webpack 配置文件前端打包工具。
详细信息参考 https://webpack.js.org/。
rollup.config.js
: rollup 配置文件另外一个前端打包工具。
详细信息参考 https://rollupjs.org/。
gulpfile.js
: gulp 配置文件前端文件流操做构建工具。
详细信息参考 https://www.gulpjs.com/。
jest.config.js
: jest 配置文件前端测试组件。
详细信息参考 https://jestjs.io/。
.gitattributes
: git 属性配置详细信息参考 https://git-scm.com/docs/gitattributes。
.travis.yml
: travis 配置文件一个持续集成服务。
详细信息参考 https://www.travis-ci.org/。
appveyor.yml
: appveyor 配置文件又一个持续集成服务。
详细信息参考 https://www.appveyor.com/。
更多博客,查看 https://github.com/senntyou/blogs
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)