react项目构建
使用脚手架：create-react-app 配置：antd UI框架配置和less配置
一、命令行依次输入如下的命令
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
创建完成后文件的结构如下：
二、public文件
public/favicon.ico
html的ico 图标，在index.html中会有引入；
可以使用图片，通过线上ico图标制作出，.ico图标来替换react默认的
public/manifest.json
app配置文件，设置icons，首页路径等；
三、src文件夹
src/index.js 是入口文件
src/App.js是最大的组件App
src/registerserviceworker.js
用来做资源离线的缓存，
注意：registerServiceWorker注册的service worker 只在生产环境(正式环境)中生效。
四、四个命令
① npm start 启动项目，在 http://localhost:3000查看项目运行
② npm run build 项目打包，生成一个build文件夹，如下
③ npm run eject 弹出配置文件--不可逆操作--用于修改默认的配置
当对react-script配置好的构建工具和配置项不满意时使用这个命令，他将命令运行的脚本js分离出来，输入命令时指向的是这些脚本，你可以根据情况调整这些代码。
④ npm test --测试
五、antd-mobile/antd 配置
1.安装antd/antd-mobile
npm install antd --save
//或者
npm install antd-mobile --save
2.引入 react-app-rewired 并修改 package.json 里的启动配置:
npm install react-app-rewired --save-dev
/* package.json */
"scripts": {
-"start":"react-scripts start",
+"start":"react-app-rewired start",
-"build":"react-scripts build",
+"build":"react-app-rewired build",
-"test":"react-scripts test --env=jsdom",
+"test":"react-app-rewired test --env=jsdom",
}
3.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports =function override(config, env){
return config;
};
4.安装 babel-plugin-import
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
npm install babel-plugin-import --save-dev
+ const { injectBabelPlugin } =require('react-app-rewired');
module.exports =function override(config, env){
+config= injectBabelPlugin(['import', { libraryName:'antd-mobile', style:'css'}],config);
return config;
};
5.组件内引用
-import Button from 'antd-mobile/lib/button';
+import { Button } from 'antd-mobile';
六、less 配置
1.安装所需less依赖
npm install less-loader less --save-dev
2.安装react-app-rewire-less
npm install --save-dev react-app-rewire-less
3.根目录下找到刚才的config-overrides.js 继续修改配置
/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
+ config = rewireLess.withLoaderOptions({modifyVars: { "@primary-color": "#1DA57A" }})(config, env);
return config;
};
如果你想要弹出内建配置，再配置antd和less，你可以继续看接下来的部分：
七、antd-mobile/antd 配置（弹出内建配置）
1、弹出配置文件
npm run eject
弹出的配置文件如下，弹出了config文件夹和scripts文件夹
config文件夹----中的配置文件可供修改
scripts文件夹----作为命令对应要运行的文件
弹出后注意修改package.json 里启动命令的配置
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
2.安装antd/antd-mobile
npm install antd --save
//或者
npm install antd-mobile --save
3.安装 babel-plugin-import
npm install babel-plugin-import --save-dev
4.修改package.json文件
"babel": {
"presets": [ "react-app" ],
"plugins": [
[ "import",{"libraryName": "antd", "style": "css"}]
],
},
或者根目录下新建一个.babelrc，
写入如下的代码，这个文件将把package.json的babel的配置对象完全覆盖掉
{ "presets": [ "react-app" ], "plugins": [
[ "import", { "libraryName": "antd", "style": “css”} ]
]}
八、less 配置（弹出内建配置）
1、安装所需less依赖
npm install less-loader less --save-dev
2、修改配置文件
找到根目录下的config文件夹下的webpack.config.dev.js 和 webpack.config-prod.js
- ① exclude的数组中/.css/
- ② /.(css|less)$/下的use数组中增加less-loader
use: [
{
loader:require.resolve('css-loader'),
options: {importLoaders:1, minimize:true,sourceMap: shouldUseSourceMap,},
},
{
loader:require.resolve('postcss-loader'),
options: {
ident:'postcss',
plugins:()=>[
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9',],
flexbox:'no-2009',
}),
],
},
},
+ {
+ loader:require.resolve('less-loader')// compiles Less to CSS
+ }
]
