内容目录
##第一步创建一个项目 并 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.lessRege
x中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 运行一下,正常,继续
见下一篇
【第一部分】create-react-app 技术栈:react+react-router+redux+axios+es6+webpack
【第二部分】create-react-app 技术栈:react+react-router+redux+axios+es6+webpack
【第三部分】create-react-app 技术栈:react+react-router+redux+axios+es6+webpack