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。。。