feat: provide esm browser bundles (#383)

Author: ktsn

build/build.js

@@ -1,9 +1,10 @@
 const fs = require('fs')
 const path = require('path')
 const zlib = require('zlib')
-const uglify = require('uglify-js')
+const uglify = require('uglify-es')
 const rollup = require('rollup')
 const replace = require('rollup-plugin-replace')
+const babel = require('rollup-plugin-babel')
 const version = process.env.VERSION || require('../package.json').version
 const banner =
 `/**
@@ -18,6 +19,31 @@ if (!fs.existsSync('dist')) {
 
 const resolve = _path => path.resolve(__dirname, '../', _path)
 
+const babelConfigForModern = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        modules: false,
+        targets: {
+          esmodules: true
+        }
+      }
+    ]
+  ]
+}
+
+const babelConfigForLegacy = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        modules: false
+      }
+    ]
+  ]
+}
+
 build([
   {
     file: resolve('dist/vue-class-component.js'),
@@ -36,6 +62,16 @@ build([
   {
     file: resolve('dist/vue-class-component.esm.js'),
     format: 'esm'
+  },
+  {
+    file: resolve('dist/vue-class-component.esm.browser.js'),
+    format: 'esm',
+    env: 'development'
+  },
+  {
+    file: resolve('dist/vue-class-component.esm.browser.min.js'),
+    format: 'esm',
+    env: 'production'
   }
 ].map(genConfig))
 
@@ -44,7 +80,13 @@ function genConfig (opts) {
     input: {
       input: resolve('lib/index.js'),
       external: ['vue'],
-      plugins: []
+      plugins: [
+        babel(
+          opts.format === 'esm' && typeof opts.env === 'string'
+            ? babelConfigForModern
+            : babelConfigForLegacy
+        )
+      ]
     },
     output: {
       file: opts.file,
@@ -88,7 +130,7 @@ function buildEntry ({ input, output }) {
     .then(bundle => bundle.generate(output))
     .then(({ code }) => {
       if (isProd) {
-        var minified = uglify.minify(code, {
+        const minified = uglify.minify(code, {
           output: {
             preamble: output.banner,
             ascii_only: true

package.json

@@ -56,12 +56,13 @@
     "reflect-metadata": "^0.1.12",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.5",
+    "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-replace": "^2.0.0",
     "testdouble": "^3.5.0",
     "ts-loader": "^5.2.1",
     "typescript": "^3.1.1",
     "typescript-eslint-parser": "^20.0.0",
-    "uglify-js": "^3.3.10",
+    "uglify-es": "^3.3.9",
     "vue": "^2.5.13",
     "vue-loader": "^15.4.2",
     "vue-template-compiler": "^2.5.13",

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": [
       "dom",
       "es2015"

yarn.lock

@@ -1550,11 +1550,6 @@ commander@~2.13.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
   integrity sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==
 
-commander@~2.17.1:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
-  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
-
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2219,6 +2214,11 @@ estree-walker@^0.5.2:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
   integrity sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig==
 
+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
+
 esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -4397,6 +4397,14 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rollup-plugin-babel@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.3.3.tgz#7eb5ac16d9b5831c3fd5d97e8df77ba25c72a2aa"
+  integrity sha512-tKzWOCmIJD/6aKNz0H1GMM+lW1q9KyFubbWzGiOG540zxPPifnEAHTZwjo0g991Y+DyOZcLqBgqOdqazYE5fkw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    rollup-pluginutils "^2.8.1"
+
 rollup-plugin-replace@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.1.0.tgz#f9c07a4a89a2f8be912ee54b3f0f68d91e9ed0ae"
@@ -4414,6 +4422,13 @@ rollup-pluginutils@^2.0.1:
     estree-walker "^0.5.2"
     micromatch "^2.3.11"
 
+rollup-pluginutils@^2.8.1:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
+  dependencies:
+    estree-walker "^0.6.1"
+
 rollup@^0.66.5:
   version "0.66.5"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.66.5.tgz#49b109d3db4772301d84b8ed9617a4481e9a8042"
@@ -4954,22 +4969,14 @@ typescript@^3.1.1:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.1.tgz#3362ba9dd1e482ebb2355b02dfe8bcd19a2c7c96"
   integrity sha512-Veu0w4dTc/9wlWNf2jeRInNodKlcdLgemvPsrNpfu5Pq39sgfFjvIIgTsvUHCoLBnMhPoUA+tFxsXjU6VexVRQ==
 
-uglify-es@^3.3.4:
+uglify-es@^3.3.4, uglify-es@^3.3.9:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
   integrity sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==
   dependencies:
     commander "~2.13.0"
     source-map "~0.6.1"
 
-uglify-js@^3.3.10:
-  version "3.4.9"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
-  integrity sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==
-  dependencies:
-    commander "~2.17.1"
-    source-map "~0.6.1"
-
 uglifyjs-webpack-plugin@^1.2.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.3.0.tgz#75f548160858163a08643e086d5fefe18a5d67de"