feat: ✨ 增加移动端适配方案: postcss-px-to-viewport

package.json

@@ -87,6 +87,7 @@
         "postcss-loader": "^7.0.2",
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^8.0.1",
+        "postcss-px-to-viewport": "^1.1.1",
         "prettier": "^2.8.3",
         "sass-loader": "^13.2.0",
         "style-loader": "^3.3.1",

postcss.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+    plugins: {
+        'postcss-px-to-viewport': {
+            unitToConvert: 'px', // 要转化的单位
+            viewportWidth: 750, // 窗口宽度: UI设计稿给的手机的窗口宽度 （xx/750*100vw）
+            viewportHeight: 1624, // 视窗的高
+            unitPrecision: 6, // 转换后的精度，即小数点位数
+            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
+            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
+            selectorBlackList: [], // 指定不转换为视窗单位的类名，
+            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
+            replace: true, // 是否转换后直接更换属性值
+            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
+            landscape: false // 是否处理横屏情况
+        }
+    }
+};

webpack/build.sh

@@ -15,62 +15,9 @@ readonly OUTPUT=${ROOT_DIR}/output
 # 添加下一行保证能够找到正确的Node和npm，以及yarn命令。
 export PATH=$NODEJS_12_16_1_BIN:$PATH
 
-# 核心代码：编译目标
-stage=${1:-offline}
-
-# 核心代码：获取提交 HASH，拼接【日期 + buildId 前 7 位】，生成示例: 2021-04-26-9472769
-# 也可以自定义，符合 buildid 规范即可：buildid 只支持如下字符：英文字母(大小写)，数字(0-9)，下划线(_)，中划线(-)，点(.)，@ 符号
-revision=${AGILE_REVISION}
-
-# 取revision 前7个字符
-buildId=${stage}_$(date '+%Y-%m-%d')-${revision:0:7}
-
-# 核心代码：替换 <buildid> 为当前构建版本，要在打包前替换
-# sed -i '' "s/<buildid>/${buildId}/g" $ROOT_DIR/weirwood.json
-sed -i "s/<buildid>/${buildId}/g" $ROOT_DIR/weirwood.json
-
-# 清空输出区
-rm -rf output
-
-# 如果NODE_ENV为production, npm5以上版本就不会安装devDependencies。
-# 所以，你先把它设置为development，保证你的devDependencies依赖也会被安装。
-NODE_ENV=development &&  npm install -dd
-
-# 为生产环境构建加NODE_ENV=production.
-# webpack, babel等工具会使用这个环境变量来决定会不会优化，所以再设置成production。
-NODE_ENV=production
-BUILD_LIST=build
-
-npm run build:$1
-echo $1
-
-mkdir $OUTPUT
-
-# 将weirwood.json拷贝到输出目录
-cp $ROOT_DIR/weirwood.json ${BUILD_LIST}
-
-cd ${BUILD_LIST}/js
-# 核心代码：压缩所有 sourcemap，注意不能包含文件夹，必须扁平压缩
-tar -czf sourcemap.tar.gz *.js *.js.map
-mv sourcemap.tar.gz $ROOT_DIR/$BUILD_LIST
-
-# 核心代码： 删除所有 map 文件和 map 压缩包
-rm *.js.map
-# rm sourcemap.tar.gz
-
-cd $ROOT_DIR/$BUILD_LIST
-
-# 压缩资源
-jar -cvf build.zip *
-
-# 拷贝压缩资源到输出目录，docker要拉取的资源
-cp build.zip $OUTPUT
-
-# 清空打包区域
-cd $ROOT_DIR && rm -rf $BUILD_LIST
 
 # 验证是或否成功
 echo "脚本执行完毕..."
 
 # 退出当前脚本
-exit 0
+exit 0

webpack/config/webpack.common.js

@@ -1,5 +1,4 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 简化 HTML 文件创建以服务捆绑包的插件, 将js文件自动引进 html 文件中
-// const PreloadWebpackPlugin = require('preload-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 抽离css文件, 这个插件将CSS取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持按需加载 CSS 和 SourceMaps。
 const WebpackBar = require('webpackbar'); // 优雅的 Webpack 进度条和分析器
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); // 启动本地服务/打包错误提示
@@ -158,10 +157,6 @@ const config = {
                 configFile: paths.appTsConfig
             }
         })
-        // new PreloadWebpackPlugin({
-        //     rel: 'prefetch', // 预加载
-        //     include: ['book'],
-        // }),
     ]
 };
 

webpack/config/webpack.prod.js

@@ -10,7 +10,6 @@ const {shouldOpenAnalyzer, ANALYZER_HOST, ANALYZER_PORT} = require('../conf');
 
 const prodConfig = {
     mode: 'production',
-    // devtool: 'hidden-source-map',
     target: 'browserslist',
     output: {
         path: paths.appBuild,
@@ -20,7 +19,6 @@ const prodConfig = {
         clean: true // 在生成文件之前清空 output 目录
     },
     plugins: [
-        // new CleanWebpackPlugin(), // 使用clean: true 代替
         new MiniCssExtractPlugin({
             filename: 'css/[name].[contenthash:8].css',
             chunkFilename: 'css/[name].[contenthash:8].chunk.css',

webpack/setProxy.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line unicorn/no-abusive-eslint-disable
 const Cookie = '';
 const proxySettings = {
     '/api': {
@@ -8,16 +7,16 @@ const proxySettings = {
         // target: 'http://dev.xxx.xxx.com',  // 线上(prod)环境地址
         changeOrigin: true,
         headers: {
-            Cookie,
-        },
+            Cookie
+        }
     },
     '/msg': {
         target: 'http://xxx.dev.xxx.com:8133',
         changeOrigin: true,
         headers: {
-            Cookie,
-        },
-    },
+            Cookie
+        }
+    }
 };
 
 module.exports = proxySettings;

yarn.lock

@@ -6538,7 +6538,7 @@ num2fraction@^1.2.2:
   resolved "https://registry.npmmirror.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
   integrity sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==
 
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@>=4.0.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -7492,6 +7492,14 @@ postcss-pseudo-class-any-link@^8.0.0:
   dependencies:
     postcss-selector-parser "^6.0.10"
 
+postcss-px-to-viewport@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz#a25ca410b553c9892cc8b525cc710da47bf1aa55"
+  integrity sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==
+  dependencies:
+    object-assign ">=4.0.1"
+    postcss ">=5.0.2"
+
 postcss-reduce-initial@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.1.tgz#c18b7dfb88aee24b1f8e4936541c29adbd35224e"
@@ -7621,6 +7629,15 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@>=5.0.2, postcss@^8.4.17, postcss@^8.4.19, postcss@^8.4.20:
+  version "8.4.21"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^5.2.17:
   version "5.2.18"
   resolved "https://registry.npmmirror.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
@@ -7639,15 +7656,6 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.2
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.4.17, postcss@^8.4.19, postcss@^8.4.20:
-  version "8.4.21"
-  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
-  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
-  dependencies:
-    nanoid "^3.3.4"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 posthtml-parser@^0.2.0, posthtml-parser@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmmirror.com/posthtml-parser/-/posthtml-parser-0.2.1.tgz#35d530de386740c2ba24ff2eb2faf39ccdf271dd"