chore: 优化polyfill方案 --no-verify

AntmJS · Mar 14, 2023 · 26e954c · 26e954c
1 parent f9ce13f
commit 26e954c
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 91 deletions.
diff --git a/packages/vantui-demo/babel.config.js b/packages/vantui-demo/babel.config.js
@@ -9,7 +9,7 @@ module.exports = {
         framework: 'react',
         ts: true,
         hot: false,
-        useBuiltIns: 'usage',
+        useBuiltIns: false,
       },
     ],
   ],

diff --git a/packages/vantui-demo/config/index.js b/packages/vantui-demo/config/index.js
@@ -4,6 +4,9 @@ const pkg = require('../package.json')
 const miniChain = require('./webpack/miniChain')
 const h5Chain = require('./webpack/h5Chain')
 
+process.env.TARO_ENV = process.env.TARO_ENV ?? 'weapp'
+process.env.NODE_ENV = process.env.NODE_ENV ?? 'production'
+
 function getVersion() {
   function fillZero(value) {
     return value < 10 ? `0${value}` : `${value}`
@@ -35,10 +38,6 @@ const config = {
     DEPLOY_VERSION: JSON.stringify(version),
   },
   alias: {
-    '@babel/runtime': npath.resolve(
-      process.cwd(),
-      '../../node_modules/@babel/runtime',
-    ),
     '@': npath.resolve(process.cwd(), 'src'),
   },
   defineConstants: {},

diff --git a/packages/vantui-demo/config/webpack/commonChain.js b/packages/vantui-demo/config/webpack/commonChain.js
@@ -0,0 +1,23 @@
+module.exports = function (chain) {
+  // taro内部的配置：scriptRule.exclude = [filename => /css-loader/.test(filename) || (/node_modules/.test(filename) && !(/taro/.test(filename)))];
+  // 下面重写exclude的配置，部分三方包需要babel，包括taro、@antmjs等
+  // 根据exclude可以看出，千万不要在项目名称上面带上taro字样，否则所有引用到node_modules的包都会重新被编译一次
+  // 以下配置将不再使用usage配置，因为根据小程序官方描述，ios9开始基本都已支持了，浏览器可以使用polyfill.io 国内可以用阿里云版的，index.html有引用
+
+  /*
+   * 如果babel.config.js设置useBuiltIns:usage
+   * /tarojs[\\/](runtime|shared|plugin-platform|components)/.test(filename) 应该被exculde
+   * /tarojs[\\/](runtime|shared|plugin-platform)/.test(filename) 应该单独babel 且设置useBuiltIns:false
+   */
+  chain.module
+    .rule('script')
+    .exclude.clear()
+    .add(
+      (filename) =>
+        /css-loader/.test(filename) ||
+        (/node_modules/.test(filename) &&
+          !/(taro)|(@antmjs)|(react-spring)|(recoil)|(buffer)|(qrcode)/.test(
+            filename,
+          )),
+    )
+}
diff --git a/packages/vantui-demo/config/webpack/h5Chain.js b/packages/vantui-demo/config/webpack/h5Chain.js
@@ -1,42 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const H5FixPlugin = require('@antmjs/plugin-h5-fix')
+const commonChain = require('./commonChain')
+
 module.exports = function (chain) {
   chain.plugin('H5FixPlugin').use(new H5FixPlugin())
-  // taro内部的配置：scriptRule.exclude = [filename => /css-loader/.test(filename) || (/node_modules/.test(filename) && !(/taro/.test(filename)))];
-  // taro内置的webpack配置在编译script的时候使用的是项目根目录的babel.config.js的配置，如果你项目的useBuiltIns设置为'usage'，则runtime和shared都会polyfill，就会导致出错
-  // 所以下面重写了exclude的配置，并给runtime和shared单独进行了匹配
-  // 根据exclude可以看出，千万不要在项目名称上面带上taro字样，否则所有引用到node_modules的包都会重新被编译一次
-  chain.module
-    .rule('script')
-    .exclude.clear()
-    .add(
-      (filename) =>
-        /css-loader/.test(filename) ||
-        (/node_modules/.test(filename) &&
-          !(
-            /(taro)|(react-spring)|(@antmjs)|(recoil)|(buffer)|(qrcode)/.test(
-              filename,
-            ) && !/tarojs[\\/](runtime|shared|plugin-platform)/.test(filename)
-          )),
-    )
-
-  chain.module
-    .rule('taro-script')
-    .test(/tarojs[\\/](runtime|shared|plugin-platform)/i)
-    .use('taro-loader')
-    .loader(require.resolve('babel-loader'))
-    .options({
-      presets: [
-        [
-          'taro',
-          {
-            framework: 'react',
-            ts: true,
-            // 这里必须要用false即runtime和shared这两个包不能进行polyfill
-            useBuiltIns: false,
-            hot: false,
-          },
-        ],
-      ],
-    })
+  commonChain(chain)
 }
diff --git a/packages/vantui-demo/config/webpack/miniChain.js b/packages/vantui-demo/config/webpack/miniChain.js
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable import/no-commonjs */
 const MiniFixPlugin = require('@antmjs/plugin-mini-fix')
 const GlobalFixPlugin = require('@antmjs/plugin-global-fix')
+const commonChain = require('./commonChain')
 
 module.exports = function (chain) {
   // add @antmjs/plugin-mini-fix and @antmjs/mini-fix
@@ -11,42 +11,5 @@ module.exports = function (chain) {
 
   //解决支付宝小程序、钉钉小程序、百度小程序没有暴露全局变量global的问题
   chain.plugin('GlobalFixPlugin').use(new GlobalFixPlugin())
-
-  // taro内部的配置：scriptRule.exclude = [filename => /css-loader/.test(filename) || (/node_modules/.test(filename) && !(/taro/.test(filename)))];
-  // taro内置的webpack配置在编译script的时候使用的是项目根目录的babel.config.js的配置，如果你项目的useBuiltIns设置为'usage'，则runtime和shared都会polyfill，就会导致出错
-  // 所以下面重写了exclude的配置，并给runtime和shared单独进行了匹配
-  // 根据exclude可以看出，不要在项目名称上面带上taro字样，否则所有引用到node_modules的包都会重新被编译一次
-  chain.module
-    .rule('script')
-    .exclude.clear()
-    .add(
-      (filename) =>
-        /css-loader/.test(filename) ||
-        (/node_modules/.test(filename) &&
-          !(
-            /(taro)|(react-spring)|(@antmjs)|(recoil)|(buffer)|(qrcode)/.test(
-              filename,
-            ) && !/tarojs[\\/](runtime|shared|plugin-platform)/.test(filename)
-          )),
-    )
-
-  chain.module
-    .rule('taro-script')
-    .test(/tarojs[\\/](runtime|shared|plugin-platform)/i)
-    .use('taro-loader')
-    .loader(require.resolve('babel-loader'))
-    .options({
-      presets: [
-        [
-          'taro',
-          {
-            framework: 'react',
-            ts: true,
-            // 这里必须要用false即runtime和shared这两个包不能进行polyfill
-            useBuiltIns: false,
-            hot: false,
-          },
-        ],
-      ],
-    })
+  commonChain(chain)
 }
diff --git a/packages/vantui-demo/package.json b/packages/vantui-demo/package.json
@@ -40,15 +40,14 @@
       "dev": ""
     }
   },
-  "browserslist": [
-    "Chrome >= 35",
-    "ChromeAndroid >= 35",
-    "iOS >= 8",
-    "Safari >= 8",
-    "Android >= 4.1",
-    "QQAndroid >= 4.1",
-    "UCAndroid >= 4.1"
-  ],
+  "browserslist": {
+    "production": [
+      "ios >= 9"
+    ],
+    "development": [
+      "last 1 version"
+    ]
+  },
   "scripts": {
     "iconfont": "npx antm-icon --input-path https://at.alicdn.com/t/xxxx.css --output-path src/iconfont.less",
     "watch:kwai": "cross-env NODE_ENV=development API_ENV=dev WATCHING=true npx taro build --type kwai --watch",

diff --git a/packages/vantui-demo/src/index.html b/packages/vantui-demo/src/index.html
@@ -11,7 +11,11 @@
     <meta name="format-detection" content="telephone=no,address=no" />
     <meta name="apple-mobile-web-app-status-bar-style" content="white" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <title></title>
+    <title>antmjs</title>
+    <script
+      crossorigin="anonymous"
+      src="https://polyfill.alicdn.com/polyfill.min.js?features=es2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2Ces2020%2Ces2021%2Ces2022"
+    ></script>
     <script>
       <%= htmlWebpackPlugin.options.script %>
     </script>