Merge pull request #105 from hotrungnhan/esmbuild

Update esm build

Author: imcvampire

Gulpfile.js

@@ -1,71 +1,70 @@
 // Gulp
-const gulp = require('gulp');
-const plumber = require('gulp-plumber');
-const file = require('gulp-file');
-const filter = require('gulp-filter');
-const merge = require('merge-stream');
-const uglify = require('gulp-uglify');
-const clean = require('gulp-clean');
-const commonjs = require('@rollup/plugin-commonjs')
+const gulp = require('gulp')
+const plumber = require('gulp-plumber')
+const file = require('gulp-file')
+const filter = require('gulp-filter')
+const uglify = require('gulp-uglify')
+const clean = require('gulp-clean')
 
 // Rollup
-const { rollup } = require('rollup');
-const babel = require('rollup-plugin-babel');
+const { rollup } = require('rollup')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
-
+const { getBabelOutputPlugin } = require('@rollup/plugin-babel')
 // Const
-const buildPath = 'dist/';
+const buildPath = 'dist/'
 
 /**
  * Generate scripts with commonjs module
  * @param {import('rollup').RollupBuild} bundle
  */
-function bundleCommonJs(bundle) {
-  return bundle.generate({
-    format: 'umd',
-    name: 'VueAxios'
-  });
-}
 
 /**
  * Bundle index.js using rollup + babel
  */
-async function bundle() {
+async function bundle(name, format) {
   const bundle = await rollup({
     input: 'src/index.js',
     plugins: [
       nodeResolve({ browser: true }),
-      commonjs(),
-      babel({
-        presets: [
-          ["@babel/env"]
-        ],
-        sourceMaps: true
-      })
-    ]
-  });
-  return bundleCommonJs(bundle);
+      getBabelOutputPlugin({
+        allowAllFormats: true,
+        presets: [['@babel/preset-env', { modules: 'auto' }]],
+        // sourceMaps: true,
+      }),
+    ],
+  })
+  return bundle.generate({
+    format: format,
+    name: name,
+  })
 }
 
 gulp.task('build', async function () {
-  const generatedBundle = await bundle();
-  const f = filter(['*', '!**/*.js.map',], { restore: true });
-  const data = ['vue-axios.es5.js', 'vue-axios.min.js'];
-  const streams = data.map((name) => {
-    return file(name, generatedBundle.output.map(o => o.code).join(" "), { src: true })
-    .pipe(plumber())
-    .pipe(f)
-    .pipe(uglify())
-    .pipe(gulp.dest(buildPath));
-  });
+  const esmbundle = await bundle('VueAxios', 'esm')
+  const commonbundle = await bundle('VueAxios', 'umd')
+  const f = filter(['*', '!**/*.js.map'], { restore: true })
+  const data = {
+    'vue-axios.common.min.js': commonbundle,
+    'vue-axios.esm.min.js': esmbundle,
+  }
 
-  return merge(streams);
-});
+  for (const [name, bundle] of Object.entries(data)) {
+    file(name, bundle.output.map((o) => o.code).join(' '), {
+      src: true,
+    })
+      .pipe(plumber())
+      .pipe(f)
+      .pipe(uglify())
+      .pipe(gulp.dest(buildPath))
+  }
+})
 
 gulp.task('clean', function () {
-  return gulp.src('dist/*').pipe(clean({
-    force: true
-  }));
+  return gulp.src('dist/*').pipe(
+    clean({
+      force: true,
+    }),
+  )
 })
 
 gulp.task('default', gulp.series('clean', 'build'))

examples/vue2/index.html

@@ -19,7 +19,7 @@
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
-    <script src="../../dist/vue-axios.min.js"></script>
+    <script src="../../dist/vue-axios.common.min.js"></script>
 
     <script type="module">
       new Vue({

examples/vue3-build/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/vue3-build/README.md

@@ -0,0 +1,8 @@
+# vue3-build 
+build empty vue project to check build size
+## run build report to check build size
+```
+yarn build:report
+npm run build:report
+```
+and open report.html in dist file and then find vue-axios

examples/vue3-build/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

examples/vue3-build/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "vue3-build",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build:report": "vue-cli-service build --report"
+  },
+  "dependencies": {
+    "axios": "^0.21.3",
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

examples/vue3-build/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import Vueaxios from '../../../dist/vue-axios.esm.min'
+import axios from 'axios'
+createApp(App).use(Vueaxios, axios).mount('#app')