React 官方脚手架 create-react-app快速生成新项目

系统管理员 2021-11-02 00:02 169阅读 0赞

进入新公司已经半年了，各个业务线，技术栈都已经熟悉，工作也已经游刃有余，决定慢下脚步，沉淀积累，回顾一下所用技术栈所包含的基本知识，以及再公司中的实战。

首先回顾新项目搭建

react脚手架目前使用较多的有三个：

react-boilerplate
    react-redux-starter-kit
    create-react-app

今天先来回顾一下react的官方脚手架

create-react-app是FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具

对于create-react-app这个脚手架，网上给的优点无外乎下面这几个：

使用的原因以及特性：

无需配置；

集成了对 React, JSX, ES6 和 Flow 的支持；

集成了开发服务器；

配置好了浏览器热加载的功能；

在 JavaScript 中可以直接 import CSS 和图片；

自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；

集成好了编译命令，编译后直接发布成产品，并且还包含了 sourcemaps。

快速使用：

建议使用node版本>6，npm版本>3

安装 create-react-app：npm install -g create-react-app

![1459640-20190625153020362-1302678715.png][]

使用 create-react-app快速生成一个新项目：

![1459640-20190625153154436-614459146.png][]

在搭建成功之后会有操作说明：

![1459640-20190625153232315-741968769.png][]

安装后cd react-progrem文件夹里启动项目：npm start

启动之后就可以看到一个welcome页面，然后就可以去src下面编辑你自己的APP啦：

![1459640-20190625153308060-1020951800.png][]

测试：npm test （执行测试动作）

编译：npm build （编译项目执行）

弹出：npm run eject （弹出配置文件，自己修改webpack之类的配置，one-way operation，慎重使用 ）

在这个脚手架里，webpack的配置文件被隐藏掉了，自定义修改webpack的配置主要有以下两种方法：

1、npm run reject 将webpack的配置文件config弹出来，此过程不可逆，弹出就无法再隐藏回去了

2、（1）使用react-app-rewired

npm install react-app-rewired --dev
    npm install babel-plugin-import --dev

（2）修改package.json里的配置：

/* package.json */
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom",
    }

（3）在项目根目录下创建config-overrides.js

/* config-overrides.js */
    const { injectBabelPlugin } = require('react-app-rewired');
    
    module.exports = function override(config, env) {
        config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
        return config;
      };

这是一般的快速搭建项目的方法，由于公司有自己的项目搭建配置，没有使用create-react-app。。。

转载于:https://www.cnblogs.com/katydids/p/11083096.html

[1459640-20190625153020362-1302678715.png]: /images/20211101/e18456b635034c85bfc20f05e1b6bf07.png
[1459640-20190625153154436-614459146.png]: /images/20211101/b092101f0b4a4b4a972d913e8f89f059.png
[1459640-20190625153232315-741968769.png]: /images/20211101/5c62ed2b80674a5f91e14ac61bd0c69a.png
[1459640-20190625153308060-1020951800.png]: /images/20211101/a2ca673a13e94f6cb37e6c27969c0e56.png