使用esbuild替换terser

build.dev.js

@@ -7,6 +7,7 @@ const path = require('path')
 const scss = require('sass')
 const chokidar = require('chokidar')
 const chalk = require('chalk')
+const { transform } = require('esbuild')
 
 const sourceDir = path.resolve(__dirname, 'src')
 const buildDir = path.resolve(__dirname, 'dist')
@@ -14,6 +15,11 @@ const buildDir = path.resolve(__dirname, 'dist')
 const VERSION = require('./package.json').version
 const BUILD_DATE = new Date().format()
 
+const ESBUILD_OPTIONS = {
+  sourcemap: false,
+  target: 'es2017',
+  format: 'esm'
+}
 const BASE_SCSS = `
 * {
   box-sizing: border-box;
@@ -30,18 +36,19 @@ function parseName(str) {
 function fixImport(str) {
   return str
     .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
-    .replace(
+    .replace(/import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g, 'import $1 from "$2.js"')
-      /import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g,
-      'import $1 from "$2.js"'
-    )
 }
 
 function compileJs(entry, output) {
+  var t1 = Date.now()
   var buf = fs.cat(entry).toString()
-  var code = fixImport(buf)
 
-  log('编译JS: %s', chalk.green(entry))
+  buf = fixImport(buf)
-  fs.echo(code, output)
+
+  transform(buf, ESBUILD_OPTIONS).then(res => {
+    log('编译JS: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1))
+    fs.echo(res.code, output)
+  })
 }
 
 // 编译样式
@@ -58,7 +65,7 @@ function mkWCFile({ style, html, js }) {
 
   let name = ''
 
-  js = js.replace(/props = (\{\}|\{[\w\W]*?\n\s{2}?\})/, function (str) {
+  js = js.replace(/props = (\{\}|\{[\w\W]*?\n\s{2}?\})/, function(str) {
     var attr = str
       .split(/\n+/)
       .slice(1, -1)
@@ -77,7 +84,7 @@ function mkWCFile({ style, html, js }) {
   })
 
   js = fixImport(js)
-    .replace(/export default class ([a-zA-Z0-9]+)/, function (s, m) {
+    .replace(/export default class ([a-zA-Z0-9]+)/, function(s, m) {
       name = m
       return `${s} extends HTMLElement `
     })
@@ -97,13 +104,11 @@ function mkWCFile({ style, html, js }) {
     )
     .replace('mounted()', 'connectedCallback()')
     .replace('unmounted()', 'disconnectedCallback()')
-    .replace(
+    .replace('watch() {', 'attributeChangedCallback(name, old, val) {\nif (old === val) {return}')
-      'watch() {',
-      'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
-    )
     .replace('adopted()', 'adoptedCallback()')
 
-  return `/**
+  return transform(js, ESBUILD_OPTIONS).then(res => {
+    return `/**
  *
  * @authors yutent (yutent.io@gmail.com)
  * @date    ${BUILD_DATE}
@@ -111,16 +116,17 @@ function mkWCFile({ style, html, js }) {
  * 
  */
 
-${js}
+${res.code}
 
 if(!customElements.get('wc-${parseName(name)}')){
   customElements.define('wc-${parseName(name)}', ${name})
 }
 `
+  })
 }
 
 const compileWC = (entry, output) => {
-  log('编译wc: %s', chalk.green(entry))
+  var t1 = Date.now()
   let code = fs.cat(entry).toString()
   let style = code.match(/<style[^>]*?>([\w\W]*?)<\/style>/)
   let html = code.match(/<template>([\w\W]*?)<\/template>/)
@@ -130,8 +136,10 @@ const compileWC = (entry, output) => {
   html = html ? html[1] : ''
   js = js ? js[1] : ''
 
-  let result = mkWCFile({ style, html, js })
+  mkWCFile({ style, html, js }).then(txt => {
-  fs.echo(result, output)
+    log('编译WC: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1))
+    fs.echo(txt, output)
+  })
 }
 
 /*=======================================================*/

build.prod.js

@@ -6,7 +6,7 @@ const fs = require('iofs')
 const path = require('path')
 const scss = require('sass')
 const chalk = require('chalk')
-const { minify } = require('terser')
+const { transform } = require('esbuild')
 
 const sourceDir = path.resolve(__dirname, 'src')
 const buildDir = path.resolve(__dirname, 'dist')
@@ -14,6 +14,12 @@ const buildDir = path.resolve(__dirname, 'dist')
 const VERSION = require('./package.json').version
 const BUILD_DATE = new Date().format()
 
+const ESBUILD_OPTIONS = {
+  sourcemap: false,
+  target: 'es2017',
+  format: 'esm',
+  minify: true
+}
 const BASE_SCSS = `
 * {
   box-sizing: border-box;
@@ -30,10 +36,7 @@ function parseName(str) {
 function fixImport(str) {
   return str
     .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
-    .replace(
+    .replace(/import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g, 'import $1 from "$2.js"')
-      /import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g,
-      'import $1 from "$2.js"'
-    )
 }
 
 function compileJs(entry, output) {
@@ -42,12 +45,8 @@ function compileJs(entry, output) {
 
   buf = fixImport(buf)
 
-  minify(buf, { sourceMap: false }).then(res => {
+  transform(buf, ESBUILD_OPTIONS).then(res => {
-    log(
+    log('编译JS: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1))
-      '编译JS: %s, 耗时 %s ms',
-      chalk.green(entry),
-      chalk.yellow(Date.now() - t1)
-    )
     fs.echo(res.code, output)
   })
 }
@@ -72,7 +71,7 @@ function mkWCFile({ style, html, js }) {
   html = html.replace(/[\n\r]+/g, ' ')
   html = html.replace(/\s+/g, ' ')
 
-  js = js.replace(/props = (\{\}|\{[\w\W]*?\n\s{2}?\})/, function (str) {
+  js = js.replace(/props = (\{\}|\{[\w\W]*?\n\s{2}?\})/, function(str) {
     var attr = str
       .split(/\n+/)
       .slice(1, -1)
@@ -91,7 +90,7 @@ function mkWCFile({ style, html, js }) {
   })
 
   js = fixImport(js)
-    .replace(/export default class ([a-zA-Z0-9]+)/, function (s, m) {
+    .replace(/export default class ([a-zA-Z0-9]+)/, function(s, m) {
       name = m
       return `${s} extends HTMLElement `
     })
@@ -112,13 +111,10 @@ function mkWCFile({ style, html, js }) {
     )
     .replace('mounted()', 'connectedCallback()')
     .replace('unmounted()', 'disconnectedCallback()')
-    .replace(
+    .replace('watch() {', 'attributeChangedCallback(name, old, val) {\nif (old === val) {return}')
-      'watch() {',
-      'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
-    )
     .replace('adopted()', 'adoptedCallback()')
 
-  return minify(js, { sourceMap: false }).then(res => {
+  return transform(js, ESBUILD_OPTIONS).then(res => {
     return `/**
   *
   * @authors yutent (yutent.io@gmail.com)
@@ -148,11 +144,7 @@ const compileWC = (entry, output) => {
   js = js ? js[1] : ''
 
   mkWCFile({ style, html, js }).then(txt => {
-    log(
+    log('编译WC: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1))
-      '编译WC: %s, 耗时 %s ms',
-      chalk.green(entry),
-      chalk.yellow(Date.now() - t1)
-    )
     fs.echo(txt, output)
   })
 }

package.json

@@ -11,20 +11,15 @@
     "url": "git+https://github.com/bytedo/wcui.git"
   },
   "main": "dist/",
-  "keywords": [
+  "keywords": ["web-components", "wc", "components", "yutent"],
-    "web-components",
-    "wc",
-    "components",
-    "yutent"
-  ],
   "author": "yutent",
   "license": "MIT",
   "devDependencies": {
-    "chalk": "^2.4.2",
+    "chalk": "^3.0.0",
-    "chokidar": "^1.7.0",
+    "chokidar": "^3.5.2",
-    "es.shim": "^2.0.1",
+    "es.shim": "^2.0.2",
     "iofs": "^1.5.2",
-    "sass": "^1.32.5",
+    "sass": "^1.43.4",
-    "terser": "^5.0.0"
+    "esbuild": "^0.13.15"
   }
 }