likes
comments
collection
share

create-react-app 初始化 React 工程，配置工具链，以及如何改多页应用

作者站长头像
站长
· 阅读数 25

create-react-app 初始化 React 工程，配置工具链，以及如何改多页应用

在新建一个react工程的时候，对于新手或者不需要非常复杂的配置的时候，直接使用create-react-app新建一个项目是最佳选择。

然而事实上create-react-app大多数还是帮我们简化了webpack的配置，对于一个稍微大型的工程，或者需要多人协作的工程来说，工具链的配置也是必不可少的。比如提交代码前格式化验证，git提交信息的验证，已经保存自动做格式化等等。

本文介绍了create-react-app创建的项目配置相关工具链，以及针对于vscode的相关配置。

初始化工程

  • 执行create-react-app脚本

    npx create-react-app levi-web --template typescript
  • 打开项目，整理目录，删除自动化测试的相关包和文件，修缮package.json

工具链配置

  • 添加huksy做提交前的各种操作

    yarn add husky -D
    yarn husky install
    npm set-script prepare "husky install" // 此处需要npm7+，7以下可手动设置

  • 添加commitlint，规范commit-msg

    yarn add @commitlint/config-conventional @commitlint/cli -D
    echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
    npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

  • 添加prettier,让代码更美观

    yarn add --dev --exact prettier
    echo {}> .prettierrc.json
    // .prettierrc.json(参考)
{
  "arrowParens": "always",
  "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
}
    // .prettierignore 
build
coverage
    npm set-script lint "prettier --write ." // 此处同样需要npm7+
    yarn add lint-staged -D
    npx husky add .husky/pre-commit "npx lint-staged"
    // package.json
{
    "lint-staged": {
        "**/*": "prettier --write --ignore-unknown"
    }
}

  • 修改eslint,使其能够和prettier更好的配合

    yarn add eslint-config-prettier eslint-plugin-prettier -D
    // package.json
"eslintConfig": {
  "extends": [
    ...
    "prettier", // It turns off all ESLint rules that are unnecessary or might conflict with Prettier
    "plugin:prettier/recommended" // Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
  ]
},
  • 配置stylelint(暂时先不要吧，后续看情况补充)

  • vscode配置settings.json(工作区)通过此配置，代码保存的时候自动执行eslint的修复动作，由于配置了eslint-plugin-prettier，让prettier成为了eslint的rule，这样便使得保存代码的时候，代码不仅按照eslint自动修复了，同时也按照prettier自动修复了

    {
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "json"
  ]
}

IDE(vscode)配置

  • 扩展程序中添加 ESLint, Prettier - Code formatter, Stylelint(暂时可不加), EditorConfig for VS Code

  • 配置settings.json(工作区)

    通过此配置，代码保存的时候自动执行eslint的修复动作，由于配置了eslint-plugin-prettier，让prettier成为了eslint的rule，这样便使得保存代码的时候，代码不仅按照eslint自动修复了，同时也按照prettier自动修复了
    {
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "json"
  ]
}

  • 添加.editorconfig，为了不同IDE行为保持一致，注意规则不要和prettier冲突，以下作为参考

    root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
# end_of_line: set to lf, cr, or crlf to control how line breaks are represented.
end_of_line = lf
# set to true to ensure file ends with a newline when saving and false to ensure it doesn't.
insert_final_newline = true
# set to true to remove any whitespace characters preceding newline characters and false to ensure it doesn't.
trim_trailing_whitespace = true

到此，恭喜你已经完成了一个工具链的配置，后面改多页应用是扩展内容一般项目用不到

改多页应用

  • 使用yarn eject，输入y

    yarn eject
  • src目录中复制一份index.tsx，该名为admin.tsx，作为第二个入口文件
  • 修改public/index.html名称为template.html，并把所有的引用到这个地址的地方改一下(这里可以不改名称，只是为了防止产生歧义)

  • 修改config/paths.js

    create-react-app 初始化 React 工程，配置工具链，以及如何改多页应用

  • 修改config/webpack.config.js

    修改entry和outputcreate-react-app 初始化 React 工程，配置工具链，以及如何改多页应用

    复制HtmlWebpackPlugin并修改create-react-app 初始化 React 工程，配置工具链，以及如何改多页应用

    注释掉WebpackManifestPlugincreate-react-app 初始化 React 工程，配置工具链，以及如何改多页应用

  • 修改scripts目录下的start和build文件

    这一步其实不改也无妨，为了增加项目的健壮性，可以改一下create-react-app 初始化 React 工程，配置工具链，以及如何改多页应用

恭喜你，到此为止，多页应用也修改完成了，可以试着访问项目，访问index.html和admin.html啦

加入群聊，一起交流前端技术吧~