直播短视频源码，基于create-react-app 适配移动端方案

直播短视频源码，基于create-react-app 适配移动端方案
最近在react的时候发现基于create-react-app搭建的项目有不少坑(react大佬请绕路)，首先公司如果没有固定的手脚架的话就需要自己搭建项目，npm各种的库，难免会耗不少时间，以下是我搭建的经历（坑）
安装基本react依赖库

npm i react-dom react-redux react-router-dom redux-thunk -S

有关webpack选项的自定义
选择的是react-app-rewired + customize-cra

npm install react-app-rewired customize-cra --save-dev

customize-cra的更多用法
然后将package.json中的scripts改成以下：

"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}

 

在根目录新建一个config-overrides.js文件，写入代码

const {override} = require("customize-cra");
module.exports = override();

 

关于适配
我使用的是postcss-px-to-viewport进行设置适配（px装换成vw）
npm代码我就不写了，额...
npm装以下的包：

"devDependencies": {
"cssnano": "^4.1.7",
"cssnano-preset-advanced": "^4.0.5",
"postcss-aspect-ratio-mini": "^1.0.1",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^12.0.1",
"postcss-px-to-viewport": "^0.0.3",
"postcss-url": "^8.0.0",
"postcss-viewport-units": "^0.1.6",
"postcss-write-svg": "^3.0.1"
},

 

在根目录新建postcss.config.js文件
加入一下代码：

module.exports = {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {utf8: false},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750 / 2, // (Number) The width of the viewport.
viewportHeight: 1334 / 2, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [".ignore", ".hairlines"], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
},
"postcss-viewport-units": {},
"cssnano": {
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false,
},
// preset: 'advanced',
// autoprefixer: false,
// 'postcss-zindex': false,
},
};

 

postcss-px-to-viewport更多的用法
注意：低版本的android手机存在不支持vw的方法，如果需要考虑低版本的手机网上有垫片方案
然后我们在配置刚刚新建的config-overrides.js文件

const {override, addPostcssPlugins} = require("customize-cra");
const postcss = require("./postcss.config.js");
// postcss 配置项
const postcssPlugin = Object.keys(postcss).map(key => require(key)(postcss[key]));
module.exports = override(
addPostcssPlugins(postcssPlugin),
);

可以看到我是通过引入postcss.config.js，然后遍历对象导入有关postcss的配置项，后期如果需要加postcss的插件，在postcss.config.js增加即可。

以上就是直播短视频源码，基于create-react-app 适配移动端方案， 更多内容欢迎关注之后的文章