直播短视频源码,基于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 适配移动端方案, 更多内容欢迎关注之后的文章