內容目錄
##第一步創建一個項目 並 eject
create-react-app react-new-project
cd react-new-project
yarn start
yarn test
yarn eject
##第二步：按需加載antd
yarn add antd
yarn add babel-plugin-import --save-dev
找到config文件夾，配置文檔 webpack.config.js
大約在398行處，此處的test: /\.(js|mjs|jsx|ts|tsx)$/, 新增如下代碼
[ "import",
{
libraryName: "antd",
style: 'css'
}
] // antd按需加載
或者：
package.json文件
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
##第三步：修改app.js
// app.js
import React from 'react';
import './App.css';
import {Button} from 'antd'
function App() {
return (
<div className="App">
<Button type="primary">按鈕</Button>
</div>
);
}
export default App;
##第四步：yarn start 重啓項目，正常運行，渲染藍色Button成功
##第五步：要使用Sass必須首先安裝node-sass
###配置 sass【此項目沒有用sass】
npm install sass-loader node-sass --save-dev
安裝完之後，我們就可以直接把原來的CSS文件後綴直接改爲 .scss 或者.sass,然後組件中導入的文件不再是 css文件而是scss文件即可。
import React from 'react';
import './App.scss';
import './assets/css/common.scss'
import {Button} from 'antd'
function App() {
return (
<div className="App">
<Button type="primary">按鈕</Button>
</div>
);
}
export default App;
目錄裏src下新建公用的文件夾assets
src/assets/css
src/assets/css/common.scss
src/assets/js
src/assets/imgs
- src
- assets
- css
- common.scss
- js
- imgs
- css
- assets
如果要使用less, 安裝less
less和less-loader都要安裝。less是支持less語法的，less-loader是webpack使用來編譯less的。
npm install less less-loader --save
###配置less 【此項目沒有用less】
（先安裝npm i less@^2.7.3 less-loader）
修改config/webpack.config.js
新增less配置變量
// 找到這裏
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//添加兩行
const lessRegex = /\.less$/; // 新增less配置
const lessModuleRegex = /\.module\.less$/; // 新增less配置，這個其實不配置也行
//找到此位置
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
//這裏進行添加
// Less 解析配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
)
},
需要注意一下幾個地方：
1.lessRegex中importLoaders的值爲1
當然這個是2也能使用，但是它的值是根據lessRegex變量後面正則中匹配的loader數來決定的，比如
const cssRegex = /\.css$/只是處理css一種類型的文件，那應該就是1；const sassRegex = /\.(scss|sass)$/;對應的是scss和sass兩種類型，那就應該是2.
2.lessRegex的use中增加modules配置
modules可以不設置，不設置的話，less只能通過字符串名的方式使用，比如定義了一個
.title,引用時
import './index.less'，使用時：
<div className="title"></div>如果需要通過模塊的方式調用，則需要把modules設置成true，就可以通過
styles.title方式使用了。import styles from './index.less',使用``
第二種配置方式
可以不增加新的變量，把css的配置包含less
const cssRegex = /\.(css|less)$/; //增加less
const cssModuleRegex = /\.module\.(css|less)$/;
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 2,// 改成2
modules: true,//使用模塊方式訪問樣式
sourceMap: isEnvProduction && shouldUseSourceMap
},
"less-loader" //增加loader
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true
}
##第六步：兼容瀏覽器配置
public文件下新增兩個兼容瀏覽器的文件，並修改public/index.html
es6-sham.min.js
es6-shim.min.js
<title>React App項目</title>
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<script type="text/javascript" src="%PUBLIC_URL%/es6-sham.min.js"></script>
<script type="text/javascript" src="%PUBLIC_URL%/es6-shim.min.js"></script>
兼容問題
npm install --save babel-polyfill
src/index.js
//頭部引入：
import 'babel-polyfill';// 或者require('babel-polyfill');
// src/index.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
##第七步：安裝 cross-env 並修改package.json文件
npm install --save-dev cross-env
或
yarn add cross-env -D
//新增
"devDependencies": {
"cross-env": "^5.2.1"
}
//修改
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
//改爲：
"scripts": {
"start": "cross-env REACT_APP_SECRET_API=development node scripts/start.js",
"testbuild": "cross-env REACT_APP_SECRET_API=test node scripts/build.js",
"prebuild": "cross-env REACT_APP_SECRET_API=preplanned node scripts/build.js",
"build": "cross-env REACT_APP_SECRET_API=production node scripts/build.js"
},
// 分別對應測試環境，預發環境，生產環境的打包，打包後的build可以部署到服務器上
npm run testbuild
npm run prebuild
npm run build
```
yarn start 運行一下，正常，繼續
見下一篇