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