feat: support hd with config.hd, Close #19

packages/umi-build-dev/package.json

@@ -15,6 +15,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "mkdirp": "^0.5.1",
+    "postcss-plugin-px2rem": "^0.7.0",
     "preact": "^8.2.5",
     "preact-compat": "^3.17.0",
     "react": "^16.2.0",

packages/umi-build-dev/src/createRouteMiddleware.js

@@ -29,6 +29,7 @@ export default function createRouteMiddleware(
         staticDirectory,
         libraryName,
         paths,
+        config,
       });
       res.setHeader('Content-Type', 'text/html');
       res.send(content);

packages/umi-build-dev/src/generateHTML.js

@@ -36,6 +36,7 @@ export default function generateHTML(opts = {}) {
       staticDirectory,
       libraryName,
       paths,
+      config,
     });
 
     mkdirp(dirname(outputFilePath));
@@ -128,6 +129,7 @@ export function getHTMLContent(opts = {}) {
     staticDirectory,
     libraryName,
     paths,
+    config,
   } = opts;
   const isDev = process.env.NODE_ENV === 'development';
 

packages/umi-build-dev/src/getConfig/configPlugins/hd.js

@@ -0,0 +1,8 @@
+export default function() {
+  return {
+    name: 'hd',
+    onChange() {
+      this.restart(/* why */ 'Config hd Changed');
+    },
+  };
+}

packages/umi-build-dev/src/getWebpackConfig.js

@@ -2,6 +2,7 @@ import { join, dirname } from 'path';
 import { existsSync } from 'fs';
 import getConfig from 'af-webpack/getConfig';
 import { webpackHotDevClientPath } from 'af-webpack/react-dev-utils';
+import px2rem from 'postcss-plugin-px2rem';
 import defaultBrowsers from './defaultConfigs/browsers';
 
 const debug = require('debug')('umi-build-dev:getWebpackConfig');
@@ -27,13 +28,15 @@ export default function(opts = {}) {
   // entry
   const entryScript = join(cwd, `./${paths.tmpDirPath}/${libraryName}.js`);
   const setPublicPathFile = join(__dirname, '../template/setPublicPath.js');
+  const hdFile = join(__dirname, '../template/hd/index.js');
   const isDev = env === 'development';
+  const initialEntry = config.hd ? [hdFile] : [];
   const entry = isDev
     ? {
-        [libraryName]: [webpackHotDevClientPath, entryScript],
+        [libraryName]: [...initialEntry, webpackHotDevClientPath, entryScript],
       }
     : {
-        [libraryName]: [setPublicPathFile, entryScript],
+        [libraryName]: [...initialEntry, setPublicPathFile, entryScript],
       };
 
   const pageCount = isDev ? null : Object.keys(routeConfig).length;
@@ -84,7 +87,7 @@ export default function(opts = {}) {
     babel: {
       presets: [[babel, { browsers }]],
     },
-    theme: config.theme,
+    theme: { ...config.theme, ...(config.hd ? { '@hd': '2px' } : {}) },
     outputPath: join(paths.absOutputPath, staticDirectory),
     hash: !isDev && hash,
     disableCSSModules,
@@ -121,5 +124,13 @@ export default function(opts = {}) {
             },
           },
         ],
+    extraPostCSSPlugins: config.hd
+      ? [
+          px2rem({
+            rootValue: 100,
+            minPixelValue: 2,
+          }),
+        ]
+      : [],
   });
 }

packages/umi-build-dev/template/hd/flex.js

@@ -0,0 +1,37 @@
+export default function(baseFontSize, fontscale) {
+  const _baseFontSize = baseFontSize || 100;
+  const _fontscale = fontscale || 1;
+
+  const win = window;
+  const doc = win.document;
+  const ua = navigator.userAgent;
+  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
+  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
+  const isUCHd =
+    UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
+  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
+  let dpr = win.devicePixelRatio || 1;
+  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
+    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
+    dpr = 1;
+  }
+  const scale = 1 / dpr;
+
+  let metaEl = doc.querySelector('meta[name="viewport"]');
+  if (!metaEl) {
+    metaEl = doc.createElement('meta');
+    metaEl.setAttribute('name', 'viewport');
+    doc.head.appendChild(metaEl);
+  }
+  metaEl.setAttribute(
+    'content',
+    'width=device-width,user-scalable=no,initial-scale=' +
+      scale +
+      ',maximum-scale=' +
+      scale +
+      ',minimum-scale=' +
+      scale,
+  );
+  doc.documentElement.style.fontSize =
+    _baseFontSize / 2 * dpr * _fontscale + 'px';
+}

packages/umi-build-dev/template/hd/index.js

@@ -0,0 +1,12 @@
+import vw from './vw.js';
+import flex from './flex.js';
+
+if (document.documentElement.clientWidth >= 750) {
+  vw(100, 750);
+} else {
+  flex();
+}
+
+// hd solution for antd-mobile@2
+// ref: https://mobile.ant.design/docs/react/upgrade-notes-cn#%E9%AB%98%E6%B8%85%E6%96%B9%E6%A1%88
+document.documentElement.setAttribute('data-scale', true);

packages/umi-build-dev/template/hd/vw.js

@@ -0,0 +1,62 @@
+export default function(baseFontSize, psdWidth) {
+  const _baseFontSize = baseFontSize || 100;
+  const _psdWidth = psdWidth || 750;
+
+  const win = window;
+  const doc = win.document;
+  const ua = navigator.userAgent;
+  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
+  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
+  const isUCHd =
+    UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
+  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
+  const dpr = win.devicePixelRatio || 1;
+  const docEl = doc.documentElement;
+  // 为了消除安卓dpr乱标的比例
+  let rate = 1;
+  let scale = 1 / dpr;
+  if (isIos) {
+    // iOS下不用做什么
+  } else if ((matches && matches[1] > 534) || isUCHd) {
+    // 有些兼容环境下, fontSize为100px的时候, 结果1rem=86px; 需要纠正viewport;
+    docEl.style.fontSize = _baseFontSize + 'px';
+    const div = doc.createElement('div');
+    div.setAttribute('style', 'width: 1rem;display:none');
+    docEl.appendChild(div);
+    const trueWidth = win.getComputedStyle(div).width;
+    docEl.removeChild(div);
+    // 如果1rem的真实px跟html.fontSize不符. 那么就要加一个rate缩放了;
+    if (trueWidth !== docEl.style.fontSize) {
+      const trueWidthVal = parseInt(trueWidth, 10);
+      rate = _baseFontSize / trueWidthVal;
+      scale = scale * rate;
+    }
+  } else {
+    // 如果是在PC或者安卓4.3(会闪屏)以下, 则正常展现.
+    scale = 1;
+  }
+
+  let metaEl = doc.querySelector('meta[name="viewport"]');
+  if (!metaEl) {
+    metaEl = doc.createElement('meta');
+    metaEl.setAttribute('name', 'viewport');
+    doc.head.appendChild(metaEl);
+  }
+  metaEl.setAttribute(
+    'content',
+    'width=device-width,user-scalable=no,initial-scale=' +
+      scale +
+      ',maximum-scale=' +
+      scale +
+      ',minimum-scale=' +
+      scale,
+  );
+
+  // width/750*100, 为了统一rem为0.01rem = 1px
+  function setFontSize() {
+    docEl.style.fontSize =
+      _baseFontSize / _psdWidth * docEl.clientWidth * rate + 'px';
+  }
+  setFontSize();
+  win.addEventListener('resize', setFontSize);
+}