fix(js): 兼容旧版浏览器 (#87)

Co-authored-by: iMaeGoo <[email protected]>

babel.config.json

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-modules-commonjs","@babel/transform-runtime"]
+}

package.json

@@ -14,8 +14,8 @@
   },
   "homepage": "https://twikoo.js.org",
   "scripts": {
-    "dev": "webpack-dev-server",
-    "serve": "webpack-dev-server",
+    "dev": "node_modules/.bin/webpack serve",
+    "serve": "node_modules/.bin/webpack serve",
     "build": "webpack --mode production",
     "analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json",
     "login": "tcb login",
@@ -26,7 +26,15 @@
     "docs:build": "vuepress build docs"
   },
   "devDependencies": {
+    "@babel/cli": "7.12.10",
+    "@babel/core": "7.12.10",
+    "@babel/plugin-transform-modules-commonjs": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "7.12.11",
+    "@babel/runtime": "^7.12.5",
     "@cloudbase/cli": "^1.0.7",
+    "@webpack-cli/serve": "^1.1.0",
+    "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^6.4.0",
     "css-loader": "^3.6.0",
     "eslint": "^7.15.0",
@@ -37,13 +45,14 @@
     "eslint-plugin-standard": "^4.1.0",
     "eslint-plugin-vue": "^7.2.0",
     "svg-inline-loader": "^0.8.2",
+    "terser-webpack-plugin": "^5.0.3",
     "vue-loader": "^15.9.5",
     "vue-template-compiler": "^2.6.12",
     "vuepress": "^1.7.1",
-    "webpack": "^4.44.1",
+    "webpack": "^5.11.1",
     "webpack-bundle-analyzer": "^4.2.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^4.0.0-beta.0"
   },
   "dependencies": {
     "@cloudbase/js-sdk": "1.3.4-alpha.1",

webpack.config.js

@@ -5,6 +5,7 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const ROOT_PATH = path.resolve(__dirname)
 const BUILD_PATH = path.resolve(ROOT_PATH, 'dist')
 const version = require('./package.json').version
+const TerserPlugin = require("terser-webpack-plugin");
 const banner =
   'Twikoo v' + version + '\n' +
   '(c) 2020-' + new Date().getFullYear() + ' iMaeGoo\n' +
@@ -16,7 +17,8 @@ module.exports = {
     rules: [
       { test: /\.vue$/, loader: 'vue-loader' },
       { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },
-      { test: /\.svg$/, loader: 'svg-inline-loader' }
+      { test: /\.svg$/, loader: 'svg-inline-loader' },
+      { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] ,plugins: ["@babel/plugin-transform-modules-commonjs","@babel/transform-runtime"]} } }
     ]
   },
   entry: {
@@ -30,19 +32,37 @@ module.exports = {
     library: 'twikoo',
     libraryTarget: 'umd'
   },
+  target: ['web', 'es5'],
   plugins: [
     new webpack.BannerPlugin(banner),
     new CopyPlugin({
       patterns: [
         { from: 'public/', to: './' }
       ]
     }),
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new TerserPlugin({
+	  parallel: 4,
+	  terserOptions: {
+	    ecma: 5,
+	    toplevel: true,
+	    ie8: true,
+	    safari10: true,
+     },
+    })
   ],
   devServer: {
-    contentBase: BUILD_PATH,
-    disableHostCheck: true,
-    port: 9820
+    static: [{
+        directory: BUILD_PATH,
+        publicPath: '/dist/',
+        serveIndex: true,
+        watch: true,
+    },],
+    port: 9820,
+    host: 'localhost',
+    open:true,
+    hot:true,
+    compress: true,
   },
   performance: {
     maxEntrypointSize: 524288,