经过 create-react-app 从零搭建 React 环境

1、 快速开始：

• 全局安装脚手架：

npm install -g create-react-app
复制代码

• 经过脚手架搭建项目：

create-react-app <项目名称>
复制代码

• 开始项目：

cd <项目名>
npm run start
复制代码

2、 查看项目 package.json 信息

2.1 package.json 一览

{
  ......
  "homepage": ".",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
复制代码

2.2 可用脚本命令说明：

• 首先说明：经过npm run 执行下面命令其实是运行 node_modules/react-srcipt/script 下对应的脚本文件；
• npm run start: 开始项目，运行项目后可经过 http://localhost:3000 访问项目；
• npm run build: 项目打包，在生产环境中编译代码，并放在build目录中；全部代码将被正确打包，并进行优化、压缩同时使用hash重命名文件；执行该命令前须要在 package.json 中新增条配置"homepage": "."（上面配置文件已给出）, 同时build后的项目须要在服务器下才能访问；不然打开的将是空白页面；
• npm run test: 交互监视模式下启动测试运行程序；
• npm run eject: 将隐藏的配置导出；须要知道的是create-react-app脚手架本质上是使用react-scripts进行配置项目，全部配置文件信息都被隐藏起来(node_modules/react-scripts)；当须要手动修改扩展webpack配置时有时就须要将隐藏的配置暴露出来；特别须要注意的是该操做是一个单向操做，一旦使用eject，那么就不能恢复了(再次将配置隐藏)；

3、 自动生成的项目目录以及文件解析：

• node_modules : 项目依赖包目录；
• public: 公共目录，该目录下的文件都不会被webpack进行加载、解析、打包；经过npm run build进行打包时该项目下的全部文件将会直接被复制到build目录下；
  • favicon.ico : 是网站图标[可替换删除]
  • index.html: 页面模板，webpack打包后将输出文件引入到该模板内；补充：index.html中经过环境变量%PUBLIC_URL% 来指向public目录路径；
  • manifest.json: PWA将应用添加至桌面的功能的实现依赖于 manifest.json 。经过manifest.json 文件能够对图标、名称等信息进行配置。
• src: 是源码目录该目录下除了index.js App.test.js registerServiceWorker.js 文件具备必定意义其他文件都是演示使用可直接删除
  • index.js: 是整个项目的入口文件；
  • App.test.js: 测试单元演示文件，暂时并不知道干吗用；能够直接删除；
  • registerServiceWorker.js: service worker 是在后台运行的一个线程，能够用来处理离线缓存、消息推送、后台自动更新等任务；registerServiceWorker就是为react项目注册了一个service worker，用来作资源的缓存，这样你下次访问时，就能够更快的获取资源。并且由于资源被缓存，因此即便在离线的状况下也能够访问应用（此时使用的资源是以前缓存的资源）。注意，registerServiceWorker注册的service worker 只在生产环境中生效，而且该功能只有在https下才能有效果；
• .gitignore: 该文件是github过滤文件配置
• README.md: 该文件是github描述文件
• package.json: 定义了项目所须要的各类模块，以及项目的配置信息（好比名称、版本、许可证等元数据）。部分依赖模块被隐藏；
• yarn.lock：每次经过yarm添加依赖或者更新包版本时 yarn都会把相关版本信息写入yarn.lock文件；npm也有相似功能，npm 也能够生成一个锁文件，就是使用上没有yarn方便

4、 添加对 less 的支持

4.1 方法一：暴露配置并进行修改

• 暴露配置文件：

npm run eject
说明: 执行eject脚本后，项目下会新增或对部分配置文件进行修改；项目下 script 目录存放着脚本文件， config 目录下存放着配置文件
复制代码

• 下载安装依赖：less-loader less

npm install less-loader less -dev
复制代码

• 修改 config 目录下的webpack配置文件：
  • 需同时修改下面的两个文件：
  • 开发环境下的配置文件：webpack.config.dev.js
  • 生产环境下的配置文件：webpack.config.prod.js
  • 两个文件的修改内容相同，对应修改内容以下(三处须要进行修改)

{
+ test: /\.(css|less)$/,
    use: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
+ importLoaders: 2,
        },
        },
        { .... },
+ {
+ loader: require.resolve('less-loader'),
+ }
    ],
}
复制代码

4.2 方法二： 使用 react-app-rewired 对 webpack 进行自定义配置(覆盖或添加)

4.2.1 react-app-rewired 老版本配置方法

react-app-rewired 的使用

• 安装 react-app-rewired 插件

npm install react-app-rewired --save-dev
复制代码

• 修改 package.json 中的脚本命令：修改以下

"scripts": {
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test --env=jsdom",
+ "eject": "react-app-rewired eject"
  }
复制代码

• 在项目根目录下(和 package.json 同级)新建配置文件 config-overrides.js ，并添加以下内容

module.exports = function override(config, env) {
  // 在这里添加配置
  return config;
}
复制代码

修改配置文件 config-overrides.js 使得项目可以支持 less

• 安装依赖包 react-app-rewire-less，经过该依赖包来实现对 less 的支持：

# 说明: 这里再也不须要额外单独安装依赖包：less-loader less
npm install react-app-rewire-less --save
复制代码

• 修改 config-overrides.js 配置文件

+ const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
+ // 只须要一条配置信息便可实现对less的支持
+ config = rewireLess(config, env);
   return config;
}
复制代码

4.2.2 react-app-rewired 新版本配置方法( >=2.1.0 )

react-app-rewired 的使用： 使用上和旧版本基本同样只是在配置上须要额外经过 customize-cra 插件来实现

• 安装 react-app-rewired customize-cra 插件

npm install react-app-rewired customize-cra --save-dev
复制代码

• 修改 package.json 中的脚本命令：修改以下

"scripts": {
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test --env=jsdom",
+ "eject": "react-app-rewired eject"
  }
复制代码

• 在项目根目录下(和 package.json 同级)新建配置文件 config-overrides.js ，并添加以下内容

const { override } = require('customize-cra');
module.exports = override();
复制代码

修改配置文件 config-overrides.js 使得项目可以支持 less

• 安装依赖： less less-loader

npm install less less-loader --save-dev
复制代码

• 修改 config-overrides.js 配置文件: addLessLoader

+ const { override, addLessLoader } = require('customize-cra');
module.exports = override(
+ addLessLoader({
+ strictMath: true,
+ noIeCompat: true
+ })
);
复制代码

5、 在 create-react-app 中使用Antd

• 安装 antd 依赖包：

npm install antd --save
复制代码

5.1 方法一： 直接导入全部样式， 并引用相应组件

• 引入 antd 组件以前须要先引入 antd 样式( 在项目入口引入全部样式 )：

import antd/dist/antd.css
复制代码

• 在项目中引入 antd 组件

import { Button } from 'antd';
复制代码

5.2 方法二： 按需加载

• 上面引入组件和样式的方式，会一次性加载全部样式并引入组件中的全部相应模块；
• 这种引入方式将会影响到应用的网络性能；
• 相应的就须要改变引入组件和样式的方式，实现样式和组件的按需加载；
• 下面将介绍三种按需加载组件样式的方法：

5.2.1 引入独立的组件和样式

import Button from 'antd/lib/button';
import 'antd/lib/button/style';
// 或者经过import antd/lib/button/style/css 进行加载样式
复制代码

5.2.2 经过暴露配置并使用 babel-plugin-import 插件实现按需加载

• babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

• 暴露配置

npm run eject
复制代码

• 安装插件：

npm install babel-plugin-import --save-dev
复制代码

• 修改 package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
},
复制代码

• 配置完后可直接导入 antd 的组件，再也不须要另外引入css样式；

import { Button } from 'antd';
复制代码

5.2.2 react-app-rewired + babel-plugin-import 实现按需加载（官网推荐）

react-app-rewired 老版本配置方法

• babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件；

• react-app-rewired 的使用在第四节已经有了详细的描述这里不在赘述；下文直接经过修改 config-overrides.js 配置来实现 antd 的按需加载

• 安装依赖包：babel-plugin-import

npm install babel-plugin-import --save-dev
复制代码

• 修改配置文件 config-overrides.js： 经过 injectBabelPlugin 插件实现 babel 的添加

+ const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
+ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
   return config;
};
复制代码

react-app-rewired 新版本配置方法( >=2.1.0 )

• 新版本能够直接经过 customize-cra 的 fixBabelImports 方法实现按需加载

+const { override, addLessLoader, fixBabelImports } = require('customize-cra');
module.exports = override(
 addLessLoader({
   strictMath: true,
   noIeCompat: true
 }),
+ fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }),
);
复制代码

5.3 经过 react-app-rewired 扩展 webpack 来实现 antd 自定义主题

• 主要经过利用了 less-loader 的 modifyVars 参数来进行主题配置
• 下面是基于第四节中对 less 的配置的基础上添加 modifyVars 参数来实现自定义主题的目的

5.3.1 react-app-rewired 老版本配置方法

• 修改 config-overrides.js 配置文件

const rewireLess = require('react-app-rewire-less');
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  // 扩展 webpack ==> 支持less
  config = rewireLess(config, env);
  // 配置 less-loader 加载参数
+ config = rewireLess.withLoaderOptions({modifyVars: { "@primary-color": "#1DA57A" },})(config, env);
  // antd 按需加载配置
  config = injectBabelPlugin(['import',
  { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
  return config;
}
复制代码

5.3.2 react-app-rewired 新版本配置方法( >=2.1.0 )

• addLessLoader 必须添加 javascriptEnabled: true
• fixBabelImports 实现对 antd 按需加载时须要设置 style: true

const { override, addLessLoader, fixBabelImports } = require('customize-cra');
module.exports = override(
  addLessLoader({
    strictMath: true,
    noIeCompat: true,
+ javascriptEnabled: true,
+ modifyVars: { "@primary-color": "#1DA570" }
  }),
+ fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true }),
);
复制代码

6、 实现对修饰器的支持： 实现对 babel 插件的使用

• 安装插件

# 若是你的 Babel < 7.x 则安装 babel-plugin-transform-decorators-legacy
npm install --save-dev babel-plugin-transform-decorators-legacy
# 若是你的 Babel >= 7.x 则应该安装 @babel/plugin-proposal-decorators
npm install --save-dev @babel/plugin-proposal-decorators
复制代码

6.1 方法一： 暴露配置并进行修改

• 假设当前 Babel >= 7.x， 若是你的 Babel < 7.x 则须要将 ["@babel/plugin-proposal-decorators", {"legacy": true}] 修改成 ["transform-decorators-legacy"]

• 暴露配置

npm run eject
复制代码

• 修改 package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
+ ["@babel/plugin-proposal-decorators", {"legacy": true}]
  ]
},
复制代码

6.2 方法二： 使用 react-app-rewired 对 webpack 进行自定义配置(覆盖或添加)

6.2.1 react-app-rewired 老版本配置方法

• react-app-rewired 的使用参考第四节：
• 修改 config-overrides.js 配置文件

// 导入添加babel插件的函数
+const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
+ config = injectBabelPlugin(["@babel/plugin-proposal-decorators", {"legacy": true}], config)
  return config;
};
复制代码

6.2.2 react-app-rewired 新版本配置方法( >=2.1.0 )

• react-app-rewired 的使用参考第四节：
• 修改 config-overrides.js 配置文件:
  • 下面给出了三种配置 babel 插件的方法， addBabelPlugin 和 addBabelPlugins 用法相似
  • useBabelRc 是容许项目使用 .babelrc 配置文件进行配置

+const {
+ override, addLessLoader, fixBabelImports,
+ addBabelPlugin, addBabelPlugins, useBabelRc
+} = require('customize-cra');
module.exports = override(
 addLessLoader({
   strictMath: true,
   noIeCompat: true,
   javascriptEnabled: true,
   modifyVars: { "@primary-color": "#1DA570" }
 }),
 fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true }),

+ addBabelPlugin(["@babel/plugin-proposal-decorators", {"legacy": true}]),

+ // ...addBabelPlugins(
+ // ["@babel/plugin-proposal-decorators", {"legacy": true}]
+ // ),
+ // useBabelRc(),
);

复制代码

7、 eslint 配置

7.1 暴露配置并进行修改

• 执行脚本 暴露配置文件

npm run eject
复制代码

• 经过修改 package.json 文件添加对 eslint 的扩展配置

...
"eslintConfig": {
  // 默认继承 脚手架自带的 eslint 配置
  "extends": "react-app",
  // 在这里扩展新增配置
  "rules":{
     // 设置规则，具体看官网用户指南下的规则文档
     "eqeqeq": "off"
  }
 }
复制代码

7.2 使用 react-app-rewired 对 webpack 进行自定义配置(覆盖或添加)

7.2.1 react-app-rewired 老版本配置方法

• react-app-rewired 的使用参考第四节：
• 安装依赖：

npm install react-app-rewired react-app-rewire-eslint --save
复制代码

• 修改 config-overrides.js 配置文件

+ const rewireEslint = require('react-app-rewire-eslint');
module.exports = function override(config, env) {
+ config = rewireEslint(config, env);
   return config;
}
复制代码

• 在根目录下建立 .eslintrc 并自定义eslint配置

{
  "rules": {
      // 设置规则，具体看官网用户指南下的规则文档
      "eqeqeq": "off"
  }
}
复制代码

7.2.2 react-app-rewired 新版本配置方法( >=2.1.0 )

• react-app-rewired 的使用参考第四节：
• 修改 config-overrides.js 配置文件： 经过 useEslintRc 启用 .eslintrc 配置文件

+ const { override, useEslintRc } = require('customize-cra');
module.exports = override(
+ useEslintRc(),
);
复制代码

• 在根目录下建立 .eslintrc 并自定义eslint配置

{
  "rules": {
      // 设置规则，具体看官网用户指南下的规则文档
      "eqeqeq": "off"
  }
}
复制代码

8、 常见问题：

8.1 经过 react-app-rewired 进行扩展配置时 发现启动项目后并无效果？

• 在确保一块儿配置没有问题下：
• 请确认是否有对脚本命令进行了正确的修改，使用 react-app-rewired 扩展配置须要修改脚本命令

{
  ....
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
...
}
复制代码

8.2 弃用通知， 则全部配置按新版本 react-app-rewired 配置方法来

The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement
复制代码