update: toolchain of build & test

.babelrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    require('@babel/preset-env')
+  ],
+  plugins: [
+    require('@babel/plugin-syntax-dynamic-import')
+  ],
+  ignore: [
+    'dist/*.js'
+  ]
+}

.eslintrc

@@ -3,6 +3,7 @@
   "env": {
     "browser": true,
     "es6": true,
+    "jest": true,
     "mocha": true
   }
 }

build.js

@@ -2,7 +2,8 @@ const fs = require('fs')
 const path = require('path')
 const rollup = require('rollup')
 const babel = require('rollup-plugin-babel')
-const uglify = require('rollup-plugin-uglify')
+const replace = require('@rollup/plugin-replace')
+const { terser } = require('rollup-plugin-terser')
 const resolve = require('rollup-plugin-node-resolve')
 const commonjs = require('rollup-plugin-commonjs')
 const version = process.env.VERSION || require('./package.json').version
@@ -14,54 +15,42 @@ const banner =
     ' * Released under the MIT License.\n' +
     ' */\n'
 
-async function build (options, output) {
+async function build (options, _outputOptions) {
   try {
     const bundle = await rollup.rollup(options)
-
-    let { code } = await bundle.generate({
-      format: output.format,
+    const outputOptions = {
+      format: _outputOptions.format,
       exports: 'named',
+      file: path.resolve(__dirname, _outputOptions.filename),
       name: 'VueLazyload'
-    })
-
-    code = rewriteVersion(code)
-
-    await write(path.resolve(__dirname, output.filename), code)
+    }
+    const { output } = await bundle.generate(outputOptions)
+    await bundle.write(outputOptions)
+    const code = output[0].code
+    console.log(blue(outputOptions.file) + ' ' + getSize(code))
   } catch (e) {
     console.error(e)
   }
 }
 
-function rewriteVersion (code) {
-  return code.replace('__VUE_LAZYLOAD_VERSION__', version)
-}
-
 function getSize (code) {
-  return (code.length / 1024).toFixed(2) + 'kb'
+  return (Buffer.byteLength(code, 'utf8') / 1024).toFixed(2) + 'kb'
 }
 
 function blue (str) {
   return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
 }
 
-function write (dest, code) {
-  return new Promise(function (resolve, reject) {
-    code = banner + code
-    fs.writeFile(dest, code, function (err) {
-      if (err) return reject(err)
-      console.log(blue(dest) + ' ' + getSize(code))
-      resolve()
-    })
-  })
-}
-
 build({
   input: path.resolve(__dirname, 'src/index.js'),
   plugins: [
     resolve(),
     commonjs(),
     babel({ runtimeHelpers: true }),
-    uglify()
+    replace({
+      '__VUE_LAZYLOAD_VERSION__': JSON.stringify(version)
+    }),
+    terser()
   ]
 }, {
   format: 'umd',
@@ -73,9 +62,12 @@ build({
   plugins: [
     resolve(),
     commonjs(),
+    replace({
+      '__VUE_LAZYLOAD_VERSION__': JSON.stringify(version)
+    }),
     babel({ runtimeHelpers: true })
   ]
 }, {
-  format: 'es',
+  format: 'esm',
   filename: 'vue-lazyload.esm.js'
 })

package.json

@@ -8,9 +8,7 @@
   "scripts": {
     "build": "node build",
     "lint": "eslint ./src",
-    "test": "karma start",
-    "test:types": "tsc -p types/test",
-    "test:debug": "cross-env DEBUG=true karma start"
+    "test": "karma start"
   },
   "dependencies": {},
   "repository": {
@@ -34,7 +32,15 @@
     "not ie <= 8"
   ],
   "license": "MIT",
+  "jest": {
+    "setupFiles": [
+      "jest-canvas-mock"
+    ]
+  },
   "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.12.17",
+    "@rollup/plugin-replace": "^2.3.4",
     "assign-deep": "^0.4.8",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
@@ -50,20 +56,15 @@
     "eslint-plugin-node": "^5.2.1",
     "eslint-plugin-promise": "^3.8.0",
     "eslint-plugin-standard": "^3.1.0",
-    "karma": "^1.7.1",
-    "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.2",
-    "karma-expect": "^1.1.3",
-    "karma-mocha": "^1.3.0",
-    "karma-rollup-preprocessor": "^5.0.2",
+    "jest": "^26.6.3",
+    "jest-canvas-mock": "^2.3.1",
     "mocha": "^4.0.1",
-    "puppeteer": "^7.1.0",
-    "rollup": "^0.51.1",
+    "rollup": "^2.39.0",
     "rollup-plugin-babel": "^2.6.1",
     "rollup-plugin-commonjs": "^8.4.1",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-uglify": "^1.0.1",
     "vue": "^2.6.12"
   }

src/lazy-component.js

@@ -1,5 +1,6 @@
 import { inBrowser } from './util'
 import Lazy from './lazy'
+
 const LazyComponent = (lazy) => {
   return {
     props: {

src/lazy-container.js

@@ -5,6 +5,7 @@ import {
   ArrayFrom
 } from './util'
 import Lazy from './lazy'
+
 export default class LazyContainerMananger {
   constructor ({ lazy }) {
     this.lazy = lazy

test/test-spec.js → test/test.spec.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueLazyload from '../src'
 import genLazyCore from '../src/lazy'
+import assert from 'assert'
 
 describe('VueLazyload.js Test Suite', function () {
   it('install', function () {
@@ -17,26 +18,26 @@ describe('VueLazyload.js Test Suite', function () {
       loading: 'loading'
     })
 
-    expect(lazyload._valueFormatter('src').src).to.equal('src')
-    expect(lazyload._valueFormatter('src').error).to.equal('error')
-    expect(lazyload._valueFormatter('src').loading).to.equal('loading')
+    expect(lazyload._valueFormatter('src').src).toBe('src')
+    expect(lazyload._valueFormatter('src').error).toBe('error')
+    expect(lazyload._valueFormatter('src').loading).toBe('loading')
 
     expect(lazyload._valueFormatter({
       src: 'src',
       error: 'error',
       loading: 'loading'
-    }).src).to.equal('src')
+    }).src).toBe('src')
 
     expect(lazyload._valueFormatter({
       src: 'src',
       error: 'error',
       loading: 'loading'
-    }).error).to.equal('error')
+    }).error).toBe('error')
 
     expect(lazyload._valueFormatter({
       src: 'src',
       error: 'error',
       loading: 'loading'
-    }).loading).to.equal('loading')
+    }).loading).toBe('loading')
   })
 })