一、 疾速最先:
- 全局裝置腳手架:
$ 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完成按需加載(官網引薦)
- react-app-rewired:的運用上文有過形貌;重要用於在不暴露設置的情況下對webpack的設置舉行擴大;
- 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"
},
...
}