使用esbuild替换terser
parent
623ec60f2c
commit
4eff159b34
42
build.dev.js
42
build.dev.js
|
@ -7,6 +7,7 @@ const path = require('path')
|
||||||
const scss = require('sass')
|
const scss = require('sass')
|
||||||
const chokidar = require('chokidar')
|
const chokidar = require('chokidar')
|
||||||
const chalk = require('chalk')
|
const chalk = require('chalk')
|
||||||
|
const { transform } = require('esbuild')
|
||||||
|
|
||||||
const sourceDir = path.resolve(__dirname, 'src')
|
const sourceDir = path.resolve(__dirname, 'src')
|
||||||
const buildDir = path.resolve(__dirname, 'dist')
|
const buildDir = path.resolve(__dirname, 'dist')
|
||||||
|
@ -14,6 +15,11 @@ const buildDir = path.resolve(__dirname, 'dist')
|
||||||
const VERSION = require('./package.json').version
|
const VERSION = require('./package.json').version
|
||||||
const BUILD_DATE = new Date().format()
|
const BUILD_DATE = new Date().format()
|
||||||
|
|
||||||
|
const ESBUILD_OPTIONS = {
|
||||||
|
sourcemap: false,
|
||||||
|
target: 'es2017',
|
||||||
|
format: 'esm'
|
||||||
|
}
|
||||||
const BASE_SCSS = `
|
const BASE_SCSS = `
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -30,18 +36,19 @@ function parseName(str) {
|
||||||
function fixImport(str) {
|
function fixImport(str) {
|
||||||
return str
|
return str
|
||||||
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
|
.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) {
|
function compileJs(entry, output) {
|
||||||
|
var t1 = Date.now()
|
||||||
var buf = fs.cat(entry).toString()
|
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 = ''
|
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
|
var attr = str
|
||||||
.split(/\n+/)
|
.split(/\n+/)
|
||||||
.slice(1, -1)
|
.slice(1, -1)
|
||||||
|
@ -77,7 +84,7 @@ function mkWCFile({ style, html, js }) {
|
||||||
})
|
})
|
||||||
|
|
||||||
js = fixImport(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
|
name = m
|
||||||
return `${s} extends HTMLElement `
|
return `${s} extends HTMLElement `
|
||||||
})
|
})
|
||||||
|
@ -97,12 +104,10 @@ function mkWCFile({ style, html, js }) {
|
||||||
)
|
)
|
||||||
.replace('mounted()', 'connectedCallback()')
|
.replace('mounted()', 'connectedCallback()')
|
||||||
.replace('unmounted()', 'disconnectedCallback()')
|
.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()')
|
.replace('adopted()', 'adoptedCallback()')
|
||||||
|
|
||||||
|
return transform(js, ESBUILD_OPTIONS).then(res => {
|
||||||
return `/**
|
return `/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
|
@ -111,16 +116,17 @@ function mkWCFile({ style, html, js }) {
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
${js}
|
${res.code}
|
||||||
|
|
||||||
if(!customElements.get('wc-${parseName(name)}')){
|
if(!customElements.get('wc-${parseName(name)}')){
|
||||||
customElements.define('wc-${parseName(name)}', ${name})
|
customElements.define('wc-${parseName(name)}', ${name})
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const compileWC = (entry, output) => {
|
const compileWC = (entry, output) => {
|
||||||
log('编译wc: %s', chalk.green(entry))
|
var t1 = Date.now()
|
||||||
let code = fs.cat(entry).toString()
|
let code = fs.cat(entry).toString()
|
||||||
let style = code.match(/<style[^>]*?>([\w\W]*?)<\/style>/)
|
let style = code.match(/<style[^>]*?>([\w\W]*?)<\/style>/)
|
||||||
let html = code.match(/<template>([\w\W]*?)<\/template>/)
|
let html = code.match(/<template>([\w\W]*?)<\/template>/)
|
||||||
|
@ -130,8 +136,10 @@ const compileWC = (entry, output) => {
|
||||||
html = html ? html[1] : ''
|
html = html ? html[1] : ''
|
||||||
js = js ? js[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)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/*=======================================================*/
|
/*=======================================================*/
|
||||||
|
|
|
@ -6,7 +6,7 @@ const fs = require('iofs')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const scss = require('sass')
|
const scss = require('sass')
|
||||||
const chalk = require('chalk')
|
const chalk = require('chalk')
|
||||||
const { minify } = require('terser')
|
const { transform } = require('esbuild')
|
||||||
|
|
||||||
const sourceDir = path.resolve(__dirname, 'src')
|
const sourceDir = path.resolve(__dirname, 'src')
|
||||||
const buildDir = path.resolve(__dirname, 'dist')
|
const buildDir = path.resolve(__dirname, 'dist')
|
||||||
|
@ -14,6 +14,12 @@ const buildDir = path.resolve(__dirname, 'dist')
|
||||||
const VERSION = require('./package.json').version
|
const VERSION = require('./package.json').version
|
||||||
const BUILD_DATE = new Date().format()
|
const BUILD_DATE = new Date().format()
|
||||||
|
|
||||||
|
const ESBUILD_OPTIONS = {
|
||||||
|
sourcemap: false,
|
||||||
|
target: 'es2017',
|
||||||
|
format: 'esm',
|
||||||
|
minify: true
|
||||||
|
}
|
||||||
const BASE_SCSS = `
|
const BASE_SCSS = `
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -30,10 +36,7 @@ function parseName(str) {
|
||||||
function fixImport(str) {
|
function fixImport(str) {
|
||||||
return str
|
return str
|
||||||
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
|
.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) {
|
function compileJs(entry, output) {
|
||||||
|
@ -42,12 +45,8 @@ function compileJs(entry, output) {
|
||||||
|
|
||||||
buf = fixImport(buf)
|
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)
|
fs.echo(res.code, output)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -72,7 +71,7 @@ function mkWCFile({ style, html, js }) {
|
||||||
html = html.replace(/[\n\r]+/g, ' ')
|
html = html.replace(/[\n\r]+/g, ' ')
|
||||||
html = html.replace(/\s+/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
|
var attr = str
|
||||||
.split(/\n+/)
|
.split(/\n+/)
|
||||||
.slice(1, -1)
|
.slice(1, -1)
|
||||||
|
@ -91,7 +90,7 @@ function mkWCFile({ style, html, js }) {
|
||||||
})
|
})
|
||||||
|
|
||||||
js = fixImport(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
|
name = m
|
||||||
return `${s} extends HTMLElement `
|
return `${s} extends HTMLElement `
|
||||||
})
|
})
|
||||||
|
@ -112,13 +111,10 @@ function mkWCFile({ style, html, js }) {
|
||||||
)
|
)
|
||||||
.replace('mounted()', 'connectedCallback()')
|
.replace('mounted()', 'connectedCallback()')
|
||||||
.replace('unmounted()', 'disconnectedCallback()')
|
.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()')
|
.replace('adopted()', 'adoptedCallback()')
|
||||||
|
|
||||||
return minify(js, { sourceMap: false }).then(res => {
|
return transform(js, ESBUILD_OPTIONS).then(res => {
|
||||||
return `/**
|
return `/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
|
@ -148,11 +144,7 @@ const compileWC = (entry, output) => {
|
||||||
js = js ? js[1] : ''
|
js = js ? js[1] : ''
|
||||||
|
|
||||||
mkWCFile({ style, html, js }).then(txt => {
|
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)
|
fs.echo(txt, output)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
17
package.json
17
package.json
|
@ -11,20 +11,15 @@
|
||||||
"url": "git+https://github.com/bytedo/wcui.git"
|
"url": "git+https://github.com/bytedo/wcui.git"
|
||||||
},
|
},
|
||||||
"main": "dist/",
|
"main": "dist/",
|
||||||
"keywords": [
|
"keywords": ["web-components", "wc", "components", "yutent"],
|
||||||
"web-components",
|
|
||||||
"wc",
|
|
||||||
"components",
|
|
||||||
"yutent"
|
|
||||||
],
|
|
||||||
"author": "yutent",
|
"author": "yutent",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"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",
|
"iofs": "^1.5.2",
|
||||||
"sass": "^1.32.5",
|
"sass": "^1.43.4",
|
||||||
"terser": "^5.0.0"
|
"esbuild": "^0.13.15"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue