create-react-app初始化React项目，配置工具链，以及如何改变多页面应用一个项目是最好的选择。不过，其实create-react-app多半是帮我们简化了webpack的配置。对于稍微大一点的项目，或者需要多人协作的项目，工具链的配置也是必不可少的。比如提交代码前的格式校验，git提交信息校验，保存后自动格式化等。本文介绍create-react-app创建的项目配置相关工具链，以及vscode的相关配置。初始化项目，执行create-react-app脚本npxcreate-react-applevi-web--templatetypescript打开项目，整理目录，删除自动化测试的相关包和文件，修复package.json工具链配置和提交前添加huksy各种操作yarnaddhusky-Dyarnhuskyinstallnpmset-scriptprepare"huskyinstall"//这里需要npm7+，7以下可以手动设置添加commitlint，规范commit-msgyarnadd@commitlint/config-conventional@commitlint/cli-Decho"module.exports={extends:['@commitlint/config-conventional']}">commitlint.config.jsnpxhuskyadd.husky/commit-msg'npx--no--commitlint--edit"$1"'添加prettier，让代码更漂亮总是”，“bracketSameLine”：false，“bracketSpacing”：true，“embeddedLanguageFormatting”：“auto”，“htmlWhitespaceSensitivity”：“css”，“insertPragma":false,"jsxSingleQuote":false,"printWidth":80,"proseWrap":"preserve","quoteProps":"as-needed","requirePragma":false,"semi":false,"singleQuote":false,"trailingComma":"es5","useTabs":false,"vueIndentScriptAndStyle":false,"tabWidth":2}//.prettierignorebuildcoveragenpmset-scriptlint"prettier--write."//这里同样需要npm7+yarnaddlint-staged-Dnpxhuskyadd.husky/pre-commit"npxlint-staged"//package.json{"lint-staged":{"**/*":"prettier--write--ignore-unknown"}}修改eslint，使其能够和prettier更好的搭配yarn??addeslint-config-prettiereslint-plugin-prettier-D//package.json"eslintConfig":{"extends":[..."prettier",//它关闭所有不必要的或可能与Prettier冲突的ESLint规则"plugin:prettier/recommended"//Prettier作为ESLintr运行ule并将差异报告为单个ESLint问题。]}，配置stylelint（先不做，后面看情况）vscode配置settings.json(workspace)通过这个配置，代码保存的时候自动执行eslint修复动作，因为配置eslint-plugin-prettier使prettier成为eslint的一个规则，这样在保存代码的时候，代码不仅会根据eslint自动修复，还会根据prettier自动修复{"editor.codeActionsOnSave":{"source.fixAll.eslint":true,"source.fixAll.stylelint":true},"eslint.validate":["javascript","javascriptreact","typescript","typescriptreact","json"]}IDE(vscode)添加ESLint,Prettier-Codeformatter,Stylelint(暂时可选),EditorConfigforVSCode在配置扩展程序中配置settings.json(workspace)。通过这个配置，在保存代码的时候，自动执行eslint的修复动作，因为eslint配置了-plugin-prettier，让prettier成为eslint的规则，这样在保存代码的时候，不仅自动修复了代码根据eslint，也根据prettier自动修复eslint.validate":["javascript","javascriptreact","typescript","typescriptreact","json"]}添加.editorconfig，为了保持不同IDE的行为一致，注意规则不要冲突withprettier，下面是一个参考root=true[*]charset=utf-8indent_style=spaceindent_size=2#end_of_line:settolf,cr,orcrlf控制换行符的表示方式end_of_line=lf#settotrueto确保文件在保存时以换行符结尾，设置为false以确保它不会。insert_final_newline=true#设置为true以删除换行符之前的任何空白字符，设置为false以确保它没有。trim_trailing_whitespace=true此时，恭喜，你已经完成了一个工具链的配置，后面改多页应用是为了扩展一般项目的内容，多页应用没必要改，使用yarneject，进入yyarnejectsrc目录,复制一份index.tsx，名称为admin.tsx，并修改public/index.html为第二个入口文件名称为template.html，并将所有引用更改为该地址（此处名称不可更改，只是为了防止歧义）修改config/paths.js修改config/webpack.config.js修改入口和输出复制HtmlWebpackPlugin并修改并注释掉WebpackManifestPlugin修改start和scripts目录构建文件步骤不改也没关系。为了增加项目的健壮性，你可以改变它。恭喜。至此，多页应用也修改完毕。可以尝试访问项目，访问index.html和admin.html加入群聊，一起交流前端技术~
