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

 

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

 

首先回顾新项目搭建

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

        

      

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

        

　　在搭建成功以后会有操做说明：

 　　

　　

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

　　启动以后就能够看到一个welcome页面，而后就能够去src下面编辑你本身的APP啦：

 　　

　　

 

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

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

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

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

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

　　二、（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。。。