經由過程create-react-app從零搭建react環境

一、 疾速最先:

  • 全局裝置腳手架:
$ npm install -g create-react-app
  • 經由過程腳手架搭建項目:
$ create-react-app <項目稱號>
  • 最先項目:
$ cd <項目名>
$ npm run start

二、 檢察項目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,那末就不能恢復了(再次將設置隱蔽);

三、 自動天生的項目目次以及文件剖析:

  • 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輕易

四、 擴大webpack設置(以 less為例)

4.1 要領一:將 webpack 設置暴露出來並舉行修正
  • 暴露設置文件:
$ 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
// 兩個文件的修正內容雷同,對應修正內容以下(三處須要舉行修正)
......
{
    // 【1】修正文件婚配正則
    test: /\.(css|less)$/, 
    use: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
            // 【2】將底本数字 1  改成数字2
            importLoaders: 2,
        },
        },
        { .... },
        // 【3】增加新的加載設置對象
        {
            loader: require.resolve('less-loader'),
        }
    ],
}
......
4.2 要領二:運用 react-app-rewired 對 webpack 舉行自定義設置(掩蓋或增加)
  • 裝置依靠包 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;
}
  • 裝置依靠包 react-app-rewire-less,經由過程該依靠包來完成對 less 的支撐:
$ npm install react-app-rewire-less --save
申明: 這裏不再須要分外零丁裝置依靠包:less-loader  less
  • 修正 config-overrides.js 設置文件,為 webpack 設置 less
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
  // 只須要一條設置信息即可完成對less的支撐
  config = rewireLess(config, env);
  // 下面解釋用於設置loader的參數
  // config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
  return config;
}

五、 在 create-react-app 中運用Antd

5.1 平常運用要領(不引薦)
  • 搭建項目:
$ create-react-app demo
$ cd demo
$ npm run start
  • 引入 antd 依靠包:
$ npm install npm
  • 引入 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';9

5.2.2 要領三:經由過程 babel-plugin-import + react-app-rewired完成按需加載(官網引薦)

  1. react-app-rewired:的運用上文有過形貌;重要用於在不暴露設置的情況下對webpack的設置舉行擴大;
  2. babel-plugin-import 是一個用於按需加載組件代碼和款式的 babel 插件
  • 裝置依靠包:babel-plugin-import
$ npm install babel-plugin-import --save-dev
  • 經由過程 react-app-rewired 對 webpack 設置舉行擴大增加新的babel插件,config-overrides.js 修正 ( 增加 ) 以下內容:
// 引入 react-app-rewired 增加 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;
};
  • 設置完后可直接導入 antd 的組件,不再須要別的引入css款式;
import { Button } from 'antd';9
5.3 經由過程 react-app-rewired 擴大 webpack 來完成 antd 自定義主題

重要經由過程利用了 less-loader 的 modifyVars 參數來舉行主題設置

  • 裝置設置:react-app-rewired (上文已細緻引見過這裏就不再細說)
  • 裝置依靠包 react-app-rewire-less :完成對 less 的支撐同時增加 modifyVars 加載參數設置
 $ npm react-app-rewire-less --save-dev 
  • 修正 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);
    // 設置loader參數
    config = rewireLess.withLoaderOptions({
        // 修正默許色彩 完成自定義主題
        modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
   // antd 按需加載設置
    config = injectBabelPlugin(['import', 
        { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
    return config;
}
5.4 經由過程插件 babel-plugin-transform-decorators-legacy 完成對潤飾器的支撐

5.4.1 經由過程暴露設置完成

  • 暴露設置
$ npm run eject
  • 裝置插件:
$ npm install --save-dev babel-plugin-transform-decorators-legacy
  • 修正 package.json
"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["transform-decorators-legacy"]
  ]
},

5.4.2 運用插件 react-app-rewired 對設置舉行擴大完成對潤飾器的支撐

  • react-app-rewired 的運用詳見上文:
  • 裝置插件:
$ npm install --save-dev babel-plugin-transform-decorators-legacy
  • 編寫 config-overrides.js 設置文件
// 導入增加babel插件的函數
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  // 潤飾器擴大 (增加babel插件:transform-decorators-legacy )
  config = injectBabelPlugin('transform-decorators-legacy', config)
  return config;
};

六、 常見問題:

6.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"
  },
...
}
    原文作者:潛隱
    原文地址: https://segmentfault.com/a/1190000015301231
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞