create-react-app 项目基本配置

目录

• 开发
  • eslint配置
  • 代码调试
  • 自动格式化代码pretty
  • 隔离开发组件
  • 分析Bundle包大小
• 样式和资源
  • SASS
  • postcss/autoprefixer
  • PostCSS Normalize
  • 添加图片，字体和文件
    • 添加svg
  • Loading .graphql Files
  • 使用public文件夹
    • 何时使用
  • 代码拆分
• 构建APP
  • 导入
    • Absolute Imports
  • 调整bootstrap样式
  • 添加 TypeScript
  • 添加自定义环境变量
    • 在HTML中使用
    • 在 .env 中添加开发环境变量
• 设置开发代理
  • 手动配置代理
    • fetch/axios

You need to put any JS and CSS files inside src, otherwise Webpack won’t see them.

webpack只负责管理src文件夹下的内容，因此只能在src文件夹下创建子文件夹进行开发

Only files inside public can be used from public/index.html.

只有public文件夹下的内容能够被index.html引用

需要安装react-app-polyfill 才能够使用es6+的语法

When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. An easy solution is to delete the node_modules/.cache folder and try again.

开发

eslint配置

要让eslint支持ts，在vscode中需要如下配置：

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "typescript", "autoFix": true },
        { "language": "typescriptreact", "autoFix": true }
    ]
}

扩展eslint

• 基于基础配置对eslint进行扩展，否则会出现一些难以预料的问题
• 当集成ts时，最好对ts文件单独配置一个override对象

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

代码调试

vscode

在根目录的.vscode文件夹中，添加launch.json文件

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

自动格式化代码pretty

npm install --save husky lint-staged prettier

package.json 增加配置

+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }

接下来，我们在 package.json 中添加一个 'lint-staged' 字段，例如：

  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+     "prettier --single-quote --write",
+     "git add"
+   ]
+ },
  "scripts": {

隔离开发组件

storybook styleguidist

分析Bundle包大小

npm install --save source-map-explorer

package.json中·"script"添加

"scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

运行

npm run build
npm run analyze

样式和资源

普通css文件 Button.css 模块化 Button.module.css

我们建议不要在 <AcceptButton> 和 <RejectButton> 组件中使用同一个 .Button CSS 类，而是使用自己的 .Button 样式创建一个 <Button> 组件，<AcceptButton> 和 <RejectButton>都可以渲染（但 不是继承）。

SASS

要在 Sass 文件之间共享变量，可以使用 Sass 导入@import语法。

.env 中配置SASS_PATH变量，用 : 分隔，例如 path1:path2:path3，以指定sass加载目录

postcss/autoprefixer

通过 Autoprefixer 自动添加浏览器前缀

.b {
  /* autoprefixer: off */
  transition: 1s; /* will not be prefixed */
}

.c {
  /* autoprefixer: ignore next */
  transition: 1s; /* will not be prefixed */
  mask: url(image.png); /* will be prefixed */
}

PostCSS Normalize

将各浏览器元素样式标准化

只需要在项目的app.css/index.css文件中引入

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */

添加图片，字体和文件

直接在 JavaScript 模块中 import 文件

要减少对服务器的请求数，导入小于 10,000 字节的图片将返回 data URI 而不是路径。 这适用于以下文件扩展名：bmp ，gif ，jpg ，jpeg 和 png 。

添加svg

可以直接导入 SVG 作为 React 组件。

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo 是一个实际的 React 组件 */}
    <Logo />
  </div>
);

ReactComponent 导入名称是特殊的，它告诉 Create React App 你想要一个渲染 SVG 的 React 组件，而不是它的文件名。

导入的svg组件可以设置一个title prop来增加可访问性

Loading .graphql Files

使用public文件夹

如果将文件放入 public 文件夹，Webpack 将 不会 处理它。相反，它将被复制到构建文件夹中。要引用 public 文件夹中的资源，需要使用名为 PUBLIC_URL 的特殊变量。

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

只有 %PUBLIC_URL% 前缀才能访问 public 文件夹中的文件。

使用缺点：

• public 文件夹中的所有文件都不会进行后处理或压缩。
• 在编译时不会调用丢失的文件，并且会导致用户出现 404 错误。
• 结果文件名不包含内容哈希值，因此你需要添加查询参数或在每次更改时重命名它们（，以便清除浏览器缓存）。

何时使用

• 你需要在构建输出中具有特定名称的文件，例如 manifest.webmanifest 。
• 你有数千张图片，需要动态引用它们的路径。
• 你希望在打包代码之外包含一个像 pace.js 这样的小脚本。
• 某些库可能与 Webpack 不兼容，你没有其他选择，只能将其包含为 <script> 标记。

代码拆分

此项目设置支持通过 动态import() 进行代码拆分。

使用react router进行代码拆分

构建APP

导入

import export export default

Absolute Imports

可以通过在根目录的jsconfig.json或tsconfig.json中配置，如果文件不存在则可以自行创建：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

调整bootstrap样式

添加 TypeScript

添加自定义环境变量

你必须以 REACT_APP_ 开头创建自定义环境变量。除了 NODE_ENV 之外的任何其他变量都将被忽略。更改任何环境变量都需要重新启动正在运行的开发服务器。

将在 process.env 上为你定义这些环境变量。例如，名为 REACT_APP_SECRET_CODE 的环境变量将在你的JS中公开为 process.env.REACT_APP_SECRET_CODE 。

在HTML中使用

你还可以在 public/index.html 中以 REACT_APP_ 开头访问环境变量。 例如：

<title>%REACT_APP_WEBSITE_NAME%</title>

在 .env 中添加开发环境变量

要定义永久环境变量，请在项目的根目录中创建名为 .env 的文件：

REACT_APP_SECRET_CODE=abcdef

设置开发代理

在 package.json 中添加 proxy 字段，例如：

  "proxy": "http://localhost:4000",

没有 text/html accept 标头的任何无法识别的请求都将被重定向到指定的 proxy（代理服务器）。

手动配置代理

fetch/axios

使用fetch时，在ie中需要使用react-app-polyfill