使用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 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(
|
||||
/import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g,
|
||||
'import $1 from "$2.js"'
|
||||
)
|
||||
.replace(/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))
|
||||
fs.echo(code, output)
|
||||
buf = fixImport(buf)
|
||||
|
||||
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,12 +104,10 @@ function mkWCFile({ style, html, js }) {
|
|||
)
|
||||
.replace('mounted()', 'connectedCallback()')
|
||||
.replace('unmounted()', 'disconnectedCallback()')
|
||||
.replace(
|
||||
'watch() {',
|
||||
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
||||
)
|
||||
.replace('watch() {', 'attributeChangedCallback(name, old, val) {\nif (old === val) {return}')
|
||||
.replace('adopted()', 'adoptedCallback()')
|
||||
|
||||
return transform(js, ESBUILD_OPTIONS).then(res => {
|
||||
return `/**
|
||||
*
|
||||
* @authors yutent (yutent.io@gmail.com)
|
||||
|
|
@ -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 })
|
||||
fs.echo(result, output)
|
||||
mkWCFile({ style, html, js }).then(txt => {
|
||||
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 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(
|
||||
/import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g,
|
||||
'import $1 from "$2.js"'
|
||||
)
|
||||
.replace(/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 => {
|
||||
log(
|
||||
'编译JS: %s, 耗时 %s ms',
|
||||
chalk.green(entry),
|
||||
chalk.yellow(Date.now() - t1)
|
||||
)
|
||||
transform(buf, ESBUILD_OPTIONS).then(res => {
|
||||
log('编译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(
|
||||
'watch() {',
|
||||
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
||||
)
|
||||
.replace('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(
|
||||
'编译WC: %s, 耗时 %s ms',
|
||||
chalk.green(entry),
|
||||
chalk.yellow(Date.now() - t1)
|
||||
)
|
||||
log('编译WC: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1))
|
||||
fs.echo(txt, output)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
17
package.json
17
package.json
|
|
@ -11,20 +11,15 @@
|
|||
"url": "git+https://github.com/bytedo/wcui.git"
|
||||
},
|
||||
"main": "dist/",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"wc",
|
||||
"components",
|
||||
"yutent"
|
||||
],
|
||||
"keywords": ["web-components", "wc", "components", "yutent"],
|
||||
"author": "yutent",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"chalk": "^2.4.2",
|
||||
"chokidar": "^1.7.0",
|
||||
"es.shim": "^2.0.1",
|
||||
"chalk": "^3.0.0",
|
||||
"chokidar": "^3.5.2",
|
||||
"es.shim": "^2.0.2",
|
||||
"iofs": "^1.5.2",
|
||||
"sass": "^1.32.5",
|
||||
"terser": "^5.0.0"
|
||||
"sass": "^1.43.4",
|
||||
"esbuild": "^0.13.15"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue