fix: IE10 support.

- deps: update - core-js@3 - @vue/cli4 - less, less-loader - eslint - remove package eslint config, save to `.eslintrc.js` - and more
vueComponent · Nov 6, 2019 · e148a5d · e148a5d
1 parent 73f0a67
commit e148a5d
Show file tree

Hide file tree

Showing 10 changed files with 2,118 additions and 1,965 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 10
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,74 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/strongly-recommended',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'generator-star-spacing': 'off',
+    'no-mixed-operators': 0,
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        'singleline': 5,
+        'multiline': {
+          'max': 1,
+          'allowFirstLine': false
+        }
+      }
+    ],
+    'vue/attribute-hyphenation': 0,
+    'vue/html-self-closing': 0,
+    'vue/component-name-in-template-casing': 0,
+    'vue/html-closing-bracket-spacing': 0,
+    'vue/singleline-html-element-content-newline': 0,
+    'vue/no-unused-components': 0,
+    'vue/multiline-html-element-content-newline': 0,
+    'vue/no-use-v-if-with-v-for': 0,
+    'vue/html-closing-bracket-newline': 0,
+    'vue/no-parsing-error': 0,
+    'no-console': 0,
+    'no-tabs': 0,
+    'quotes': [
+      2,
+      'single',
+      {
+        'avoidEscape': true,
+        'allowTemplateLiterals': true
+      }
+    ],
+    'semi': [
+      2,
+      'never',
+      {
+        'beforeStatementContinuationChars': 'never'
+      }
+    ],
+    'no-delete-var': 2,
+    'prefer-const': [
+      2,
+      {
+        'ignoreReadBeforeAssign': false
+      }
+    ]
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}
diff --git a/babel.config.js b/babel.config.js
@@ -5,24 +5,24 @@ if (IS_PROD) {
   plugins.push('transform-remove-console')
 }
 
+// lazy load ant-design-vue
+// if your use import on Demand, Use this code
+plugins.push(['import', {
+  'libraryName': 'ant-design-vue',
+  'libraryDirectory': 'es',
+  'style': true // `style: true` 会加载 less 文件
+}])
+
 module.exports = {
   presets: [
-    '@vue/app',
+    '@vue/cli-plugin-babel/preset',
     [
       '@babel/preset-env',
       {
-        'useBuiltIns': 'entry'
+        'useBuiltIns': 'entry',
+        'corejs': 3
       }
     ]
   ],
   plugins
-  // if your use import on Demand, Use this code
-  // ,
-  // plugins: [
-  //   [ 'import', {
-  //     'libraryName': 'ant-design-vue',
-  //     'libraryDirectory': 'es',
-  //     'style': true // `style: true` 会加载 less 文件
-  //   } ]
-  // ]
 }
diff --git a/package.json b/package.json
@@ -1,21 +1,21 @@
 {
   "name": "vue-antd-pro",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build:preview": "vue-cli-service build --mode preview",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
+    "build:preview": "vue-cli-service build --mode preview",
     "lint:nofix": "vue-cli-service lint --no-fix",
-    "test:unit": "vue-cli-service test:unit",
     "postinstall": "opencollective-postinstall"
   },
   "dependencies": {
     "@antv/data-set": "^0.10.2",
-    "ant-design-vue": "1.4.0-beta.0",
+    "ant-design-vue": "1.4.2",
     "axios": "^0.19.0",
-    "core-js": "2.6.9",
+    "core-js": "^3.1.2",
     "enquire.js": "^2.1.6",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
@@ -30,106 +30,34 @@
     "vue-ls": "^3.2.1",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.1.2",
-    "vue-svg-component-runtime": "^1.0.1",
     "vuex": "^3.1.1",
-    "wangeditor": "^3.1.1"
+    "wangeditor": "^3.1.1",
+    "vue-svg-component-runtime": "^1.0.1"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.2.1",
-    "@babel/polyfill": "7.2.5",
-    "@vue/cli-plugin-babel": "^3.11.0",
-    "@vue/cli-plugin-eslint": "^3.11.0",
-    "@vue/cli-plugin-unit-jest": "^3.11.0",
-    "@vue/cli-service": "^3.11.0",
+    "@vue/cli-plugin-babel": "^4.0.4",
+    "@vue/cli-plugin-eslint": "^4.0.4",
+    "@vue/cli-plugin-router": "^4.0.4",
+    "@vue/cli-plugin-unit-jest": "^4.0.4",
+    "@vue/cli-plugin-vuex": "^4.0.4",
+    "@vue/cli-service": "^4.0.4",
     "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-import": "^1.11.0",
+    "@vue/test-utils": "^1.0.0-beta.29",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-import": "^1.12.2",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "eslint": "^5.8.0",
+    "eslint": "^5.16.0",
     "eslint-plugin-html": "^5.0.0",
     "eslint-plugin-vue": "^5.2.3",
-    "less": "3.9.0",
-    "less-loader": "4.1.0",
-    "opencollective": "^1.0.3",
-    "opencollective-postinstall": "^2.0.2",
-    "vue-svg-icon-loader": "^2.1.1",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.10",
-    "webpack-theme-color-replacer": "^1.2.17"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/strongly-recommended",
-      "@vue/standard"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {
-      "generator-star-spacing": "off",
-      "no-mixed-operators": 0,
-      "vue/max-attributes-per-line": [
-        2,
-        {
-          "singleline": 5,
-          "multiline": {
-            "max": 1,
-            "allowFirstLine": false
-          }
-        }
-      ],
-      "vue/attribute-hyphenation": 0,
-      "vue/html-self-closing": 0,
-      "vue/component-name-in-template-casing": 0,
-      "vue/html-closing-bracket-spacing": 0,
-      "vue/singleline-html-element-content-newline": 0,
-      "vue/no-unused-components": 0,
-      "vue/multiline-html-element-content-newline": 0,
-      "vue/no-use-v-if-with-v-for": 0,
-      "vue/html-closing-bracket-newline": 0,
-      "vue/no-parsing-error": 0,
-      "no-console": 0,
-      "no-tabs": 0,
-      "quotes": [
-        2,
-        "single",
-        {
-          "avoidEscape": true,
-          "allowTemplateLiterals": true
-        }
-      ],
-      "semi": [
-        2,
-        "never",
-        {
-          "beforeStatementContinuationChars": "never"
-        }
-      ],
-      "no-delete-var": 2,
-      "prefer-const": [
-        2,
-        {
-          "ignoreReadBeforeAssign": false
-        }
-      ]
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+    "vue-svg-icon-loader": "^2.1.1",
+    "webpack-theme-color-replacer": "^1.2.17",
+    "opencollective": "^1.0.3",
+    "opencollective-postinstall": "^2.0.2"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 10"
-  ],
   "collective": {
     "type": "opencollective",
     "url": "https://opencollective.com/ant-design-pro-vue"

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
diff --git a/src/core/lazy_use.js b/src/core/lazy_use.js
@@ -8,13 +8,16 @@ import Viser from 'viser-vue'
 
 // ext library
 import VueClipboard from 'vue-clipboard2'
+import MultiTab from '@/components/MultiTab'
+import PageLoading from '@/components/PageLoading'
 import PermissionHelper from '@/utils/helper/permission'
 import './directives/action'
 
 VueClipboard.config.autoSetContainer = true
 
 Vue.use(Viser)
-
+Vue.use(MultiTab)
+Vue.use(PageLoading)
 Vue.use(VueStorage, config.storageOptions)
 Vue.use(VueClipboard)
 Vue.use(PermissionHelper)
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,6 @@
-// ie polyfill
-import '@babel/polyfill'
+// with polyfills
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
 
 import Vue from 'vue'
 import App from './App.vue'
@@ -8,10 +9,11 @@ import store from './store/'
 import { VueAxios } from './utils/request'
 
 // mock
+// WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
 import './mock'
 
 import bootstrap from './core/bootstrap'
-import './core/use'
+import './core/lazy_use'
 import './permission' // permission control
 import './utils/filter' // global filter
 

diff --git a/src/mock/index.js b/src/mock/index.js
@@ -1,10 +1,14 @@
-import Mock from 'mockjs2'
+import { isIE } from '@/utils/util'
 
 // 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
 if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
+  if (isIE()) {
+    console.error('ERROR: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.')
+  }
   // 使用同步加载依赖
   // 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
   console.log('mock mounting')
+  const Mock = require('mockjs2')
   require('./services/auth')
   require('./services/user')
   require('./services/manage')

diff --git a/src/utils/util.js b/src/utils/util.js
@@ -45,6 +45,13 @@ export function handleScrollHeader (callback) {
   )
 }
 
+export function isIE () {
+  const bw = window.navigator.userAgent
+  const compare = (s) => bw.indexOf(s) >= 0
+  const ie11 = (() => 'ActiveXObject' in window)()
+  return compare('MSIE') || ie11
+}
+
 /**
  * Remove loading animate
  * @param id parent element id or class