搭建你自己的前端脚手架。一般在开发一个新项目的时候，我们都会先搭建一个脚手架，然后再开始写代码。搭建脚手架可以使用create-react-app、vue-cli、yeoman等命令行工具，也可以直接使用html5-boilerplate、react-boilerplate、hackathon-starter等模板，如果这些都不能满足您的个性化需求，您可以尝试构建自己的前端脚手架。一般来说，脚手架包括目录结构定义、必要的项目配置文件和工具配置文件、工具和命令。一个基本脚手架：|--/项目根目录|--src/源代码目录|--package.jsonnpm项目文件|--README.md项目描述文件|--CHANGELOG.md版本更新记录|--.gitignoregit忽略配置文件|--.editorconfig编辑器配置文件|--.npmrcnpm配置文件|--.npmignorenpm忽略配置文件|--.eslintrceslint配置文件|--.eslintignoreeslint忽略配置文件|--.stylelintrcstylelint配置文件|--.stylelintignorestylelint忽略配置文件|--.prettierrc更漂亮的配置文件|--.prettierignore更漂亮的配置文件|--.babelrcbabel配置文件|--webpack.config.jswebpack配置文件|--rollup.config.jsrollup配置文件|--gulpfile.jsgulp配置文件一些扩展脚手架：|--/项目根目录|--bin/bin目录|--test/测试目录|--docs/文档目录|--jest.config.jsjest配置文件|--.gitattributesgit属性配置|--.travis.ymltravis配置文件|--appveyor.ymlappveyor配置文件1.package.json:npm项目文件{"name":"name",项目名"version":"0.0.1",version"main":"index.js",entryfile"bin":"bin/bin.js",bin文件"description":"description",description"repository":{"type":"git","url":"url"},"keywords":[],"homepage":"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":"npmrunlint-staged","prettier":"prettier--write\"./**/*.{js,jsx,css,less,md,json}\"","eslint":“eslint。”，“eslint：修复”：“eslint。--fix","stylelint":"stylelint\"./**/*.{css,less}\"","stylelint:fix":"stylelint\"./**/*.{css,less}\"--fix","lint-staged":"lint-staged"},"lint-staged":{检查并修改提交的代码"**/*.{js,jsx}":["eslint--fix","prettier--write","gitadd"],"**/*.{css,less}":["stylelint--fix","prettier--write","gitadd"],"**/*.{md,json}":["prettier--write","gitadd"]},"engines":{运行时节点版本要求"node":">=8.0.0"},"dependencies":{}developmentdependencies}1.1main:项目入口文件如果你将当前项目发布为npm包，其他包引用了你的包，构建工具会寻找main字段来定义入口文件，详见package.json#main其他特殊入口文件，可参考package.json非官方领域合集1.2bin：配置命令行可执行文件如果需要将当前项目安装为全局命令，则需要指定该字段，详见package.json#bin1.3脚本：配置项目命令这里定义的命令可以被npmrun调用，比如上面定义的命令：npmrunprettiernpmruneslintnpmruneslint:fixnpmrunstylelintnpmrunstylelint:fix一般来说，可以定义一些命令如下：{"test":"",test"build":"",build"dev":"",development...}2.README.md：项目描述文件项目描述的入口文件，包括文件。一般git项目web端的首页会显示这个文件的内容，包括github、bitbucket、gitlab。文件格式为markdown，具体介绍和语法可以参考https://www.markdownguide.org/。3.CHANGELOG.md：版本更新记录一般项目都会有这个文件来记录版本更新和相应的功能变化，比如react的CHANGELOG。文件格式也是markdown。4..gitignore：gitignore配置文件，用于指定哪些文件或目录不需要git版本控制。例如：.DS_STOREnode_modulesbuild/*.log*.idea.vscode详见https://git-scm.com/docs/gitignore5..editorconfig：编辑器配置文件，用于指定编辑器特定的配置。比如不同的编辑器对tabs的定义不同，可能是2个空格，也可能是4个或8个，所以需要用这个文件来统一配置编辑器。例如：#http://editorconfig.orgroot=true[*]indent_style=spaceindent_size=2end_of_line=lfcharset=utf-8trim_trailing_whitespace=trueinsert_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忽略配置文件。有关详细信息，请参阅将文件保留在您的包之外。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)版权声明：免费转载-非商业-非衍生-保留署名(CreativeCommons3.0执照）
