bytedo
/
fite
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

完成开发模式最初版

pull/1/head
yutent 2022-10-10 15:05:30 +08:00
parent 15b6e4701a
commit 502d4e4a23
5 changed files with 98 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.js
View File

@ -7,11 +7,14 @@
*/ */
import { join } from 'path' import { join } from 'path'
import { createServer, compile } from './lib/index.js'
import createServer from './lib/dev.js'
import compile from './lib/prod.js'
const WORK_SPACE = process.env.INIT_CWD const WORK_SPACE = process.env.INIT_CWD
const CONFIG_FILE = join(WORK_SPACE, 'vue.live.js') const CONFIG_FILE = join(WORK_SPACE, 'vue.live.js')
const SOURCE_DIR = join(WORK_SPACE, 'src')
let args = process.argv.slice(2) let args = process.argv.slice(2)
@ -19,8 +22,7 @@ switch (args[0]) {
case 'dev': case 'dev':
import(CONFIG_FILE) import(CONFIG_FILE)
.then(function (conf) { .then(function (conf) {
// console.log(conf) createServer(SOURCE_DIR, conf.default)
createServer(WORK_SPACE, conf.default)
}) })
.catch(err => { .catch(err => {
console.log('Import Error:', err) console.log('Import Error:', err)
@ -30,8 +32,7 @@ switch (args[0]) {
case 'build': case 'build':
import(CONFIG_FILE) import(CONFIG_FILE)
.then(function (conf) { .then(function (conf) {
// console.log(conf) compile(SOURCE_DIR, conf.default)
compile(WORK_SPACE, conf.default)
}) })
.catch(err => { .catch(err => {
console.log('Import Error:', err) console.log('Import Error:', err)

32
lib/compile-vue.js
View File

@ -14,6 +14,8 @@ const OPTIONS = {
indentWidth: 2 indentWidth: 2
} }
let imports = {}
/** /**
* 编译scss为css * 编译scss为css
* @param file <String> 文件路径或scss代码 * @param file <String> 文件路径或scss代码
@ -36,21 +38,24 @@ export function compileScss(file, style = 'expanded') {
* 主要是处理js的依赖引用 * 主要是处理js的依赖引用
* @param code <String> js代码 * @param code <String> js代码
*/ */
export function parseJs(code = '', currentPage = '') { export function parseJs(code = '', { IS_MPA, currentPage, root, pagesDir } = {}) {
let fixedStyle = '\n\n' let fixedStyle = '\n\n'
return ( return (
code code
.replace(/import (.*?) from (["'])(.*?)\2/g, function (m, alias, q, name) { .replace(/import (.*?) from (["'])(.*?)\2/g, function (m, alias, q, name) {
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', '/aseets/js/') name = name.replace('@/', '/assets/js/')
} }
if (!conf.imports[name]) { if (!imports[name]) {
if (name.startsWith('./')) { if (name.startsWith('./')) {
name = name.replace('./', `/aseets/js/${currentPage}/`) name = name.replace('./', '/assets/js/')
} else if (name.startsWith('/') && !name.startsWith('/aseets/js/')) { if (IS_MPA) {
name = name.replace(/^\//, '/aseets/js/') name += `${currentPage}/`
}
} else if (name.startsWith('/') && !name.startsWith('/assets/js/')) {
name = name.replace(/^\//, '/assets/js/')
} }
if (!name.endsWith('.js') && !name.endsWith('.vue')) { if (!name.endsWith('.js') && !name.endsWith('.vue')) {
@ -66,7 +71,7 @@ export function parseJs(code = '', currentPage = '') {
.replace(/import (["'])(.*?)\1/g, function (m, q, name) { .replace(/import (["'])(.*?)\1/g, function (m, q, name) {
if (name.endsWith('.css') || name.endsWith('.scss')) { if (name.endsWith('.css') || name.endsWith('.scss')) {
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', '/aseets/css/') name = name.replace('@/', '/assets/css/')
} }
let tmp = `style${Date.now()}` let tmp = `style${Date.now()}`
fixedStyle += `document.adoptedStyleSheets.push(${tmp})\n` fixedStyle += `document.adoptedStyleSheets.push(${tmp})\n`
@ -74,10 +79,10 @@ export function parseJs(code = '', currentPage = '') {
return `import ${tmp} from '${name}' assert { type: 'css' }` return `import ${tmp} from '${name}' assert { type: 'css' }`
} else { } else {
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', '/aseets/js/') name = name.replace('@/', '/assets/js/')
} }
// console.log(name, conf.imports[name]) // console.log(name, imports[name])
if (!conf.imports[name]) { if (!imports[name]) {
if (!name.startsWith('/') && !name.startsWith('./')) { if (!name.startsWith('/') && !name.startsWith('./')) {
name = '/' + name name = '/' + name
} }
@ -97,7 +102,7 @@ export function parseJs(code = '', currentPage = '') {
* @param file <String> 文件路径 * @param file <String> 文件路径
* @return <String> 返回转换后的js代码 * @return <String> 返回转换后的js代码
*/ */
export function compileVue(file) { export function compileVue(file, conf, options = {}) {
let code = (fs.cat(file) || '').toString() let code = (fs.cat(file) || '').toString()
let js = code.match(JS_EXP) let js = code.match(JS_EXP)
@ -106,12 +111,14 @@ export function compileVue(file) {
let fixedStyle = '\n\n' let fixedStyle = '\n\n'
imports = conf.imports
// console.log(typeof scss) // console.log(typeof scss)
scss = [...scss].flatMap(it => (it ? it[1] : '')) scss = [...scss].flatMap(it => (it ? it[1] : ''))
js = js ? js[1] : '' js = js ? js[1] : ''
html = (html ? html[1] : '').replace(/`/g, '\\`').replace(/\$\{/g, '\\${') html = (html ? html[1] : '').replace(/`/g, '\\`').replace(/\$\{/g, '\\${')
js = parseJs(js).replace( js = parseJs(js, options).replace(
'export default {', 'export default {',
`${fixedStyle}export default {\n template: \`${html}\`,` `${fixedStyle}export default {\n template: \`${html}\`,`
) )
@ -119,6 +126,7 @@ export function compileVue(file) {
if (scss.length) { if (scss.length) {
js += ` js += `
let stylesheet = new CSSStyleSheet() let stylesheet = new CSSStyleSheet()
stylesheet.path = '${file.slice(options.IS_MPA ? options.pagesDir.length : options.root.length)}'
stylesheet.replaceSync(\`${compileScss(scss.join('\n'))}\`) stylesheet.replaceSync(\`${compileScss(scss.join('\n'))}\`)
document.adoptedStyleSheets.push(stylesheet) document.adoptedStyleSheets.push(stylesheet)
` `

107
lib/dev.js
View File

@ -1,6 +1,6 @@
import http from 'http' import http from 'http'
import fs from 'iofs' import fs from 'iofs'
import { join, resolve,dirname } from 'path' import { join, resolve, dirname } from 'path'
import { parse } from 'url' import { parse } from 'url'
import { compileScss, parseJs, compileVue } from './compile-vue.js' import { compileScss, parseJs, compileVue } from './compile-vue.js'
@ -11,25 +11,50 @@ import { COMMON_HEADERS } from './constants.js'
const decode = decodeURIComponent const decode = decodeURIComponent
export default function createServer(root = '', conf = {}) { export default function createServer(root = '', conf = {}) {
let pagesDir = '' const IS_MPA = Object.keys(conf.pages).length > 1
let indexPage = Object.keys(conf.pages).map(it => { let indexPage = Object.keys(conf.pages)
let tmp = it + '.html' .map(it => {
return `<li><a href="/${tmp}">${tmp}</a></li>` let tmp = it + '.html'
}).join('') return `<li><a href="/${tmp}">${tmp}</a></li>`
})
.join('')
let currentPage = '' let pagesDir = '',
currentPage = ''
http http
.createServer(function (req, res) { .createServer(function (req, res) {
let pathname = parse(req.url.slice(1)).pathname let pathname = parse(req.url.slice(1)).pathname
let isIndex = pathname === '' let pageName = '',
isIndex = false
let ext
if (pathname) {
pathname = pathname.split('/')
if (pathname[0].endsWith('.html')) {
pageName = pathname.shift()
let tmp = pageName.split('.')
ext = tmp.pop()
pageName = tmp.join('.')
currentPage = pageName
pagesDir = dirname(conf.pages[pageName].entry)
} else {
ext = pathname[pathname.length - 1].split('.').pop()
pageName = currentPage
}
pathname = pathname.join('/')
} else {
isIndex = true
}
for (let k in COMMON_HEADERS) { for (let k in COMMON_HEADERS) {
res.setHeader(k, COMMON_HEADERS[k]) res.setHeader(k, COMMON_HEADERS[k])
} }
if (isIndex) { if (isIndex) {
res.setHeader('content-type', MIME_TYPES.html) res.setHeader('content-type', MIME_TYPES.html)
res.writeHead(200, 'OK') res.writeHead(200, 'OK')
@ -37,37 +62,36 @@ export default function createServer(root = '', conf = {}) {
} else { } else {
res.setHeader('accept-ranges', 'bytes') res.setHeader('accept-ranges', 'bytes')
let tmp = pathname.split('.')
let ext = tmp.pop()
let page = tmp.join('.')
let code = '' let code = ''
console.log(req); // return res.end(JSON.stringify({url: req.url, ext, pageName}))
return res.end(JSON.stringify({url: req.url,ext, page})) res.setHeader('x-ext', ext)
res.setHeader('x-page', pageName)
switch (ext) { switch (ext) {
case 'html': case 'html':
{ {
let entry = fs.cat(join(pagesDir, page, 'main.js')).toString() let entry = fs.cat(conf.pages[pageName].entry).toString()
let fixedStyle = '\n\n' let fixedStyle = '\n\n'
currentPage = page
res.setHeader('content-type', MIME_TYPES.html) res.setHeader('content-type', MIME_TYPES.html)
entry = entry entry = entry
.replace(/import (.*?) from (["'])(.*?)\2/g, function (m, alias, q, name) { .replace(/import (.*?) from (["'])(.*?)\2/g, function (m, alias, q, name) {
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', '/aseets/js/') name = name.replace('@/', '/assets/js/')
} }
if (!conf.imports[name]) { if (!conf.imports[name]) {
if (name.startsWith('./')) { if (name.startsWith('./')) {
name = name.replace('./', `/aseets/js/${currentPage}/`) name = name.replace('./', '/assets/js/')
} else if (name.startsWith('/') && !name.startsWith('/aseets/js/')) {
name = name.replace(/^\//, '/aseets/js/') if (IS_MPA) {
name += `${currentPage}/`
}
} else if (name.startsWith('/') && !name.startsWith('/assets/js/')) {
name = name.replace(/^\//, '/assets/js/')
} }
if (!name.endsWith('.js') && !name.endsWith('.vue')) { if (!name.endsWith('.js') && !name.endsWith('.vue')) {
@ -79,7 +103,7 @@ export default function createServer(root = '', conf = {}) {
.replace(/import (["'])(.*?)\1/g, function (m, q, name) { .replace(/import (["'])(.*?)\1/g, function (m, q, name) {
if (name.endsWith('.css') || name.endsWith('.scss')) { if (name.endsWith('.css') || name.endsWith('.scss')) {
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', '/aseets/css/') name = name.replace('@/', '/assets/css/')
} }
let tmp = `style${Date.now()}` let tmp = `style${Date.now()}`
fixedStyle += `document.adoptedStyleSheets.push(${tmp})\n` fixedStyle += `document.adoptedStyleSheets.push(${tmp})\n`
@ -87,7 +111,7 @@ export default function createServer(root = '', conf = {}) {
return `import ${tmp} from '${name}' assert { type: 'css' }` return `import ${tmp} from '${name}' assert { type: 'css' }`
} else { } else {
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', '/aseets/js/') name = name.replace('@/', '/assets/js/')
} }
// console.log(name, conf.imports[name]) // console.log(name, conf.imports[name])
if (!conf.imports[name]) { if (!conf.imports[name]) {
@ -111,6 +135,7 @@ export default function createServer(root = '', conf = {}) {
'</head>', '</head>',
"<script>window.process = {env: {NODE_ENV: 'development'}}</script></head>" "<script>window.process = {env: {NODE_ENV: 'development'}}</script></head>"
) )
.replace('{{title}}', conf.pages[pageName].title)
.replace('{{importmap}}', JSON.stringify({ imports: conf.imports })) .replace('{{importmap}}', JSON.stringify({ imports: conf.imports }))
.replace( .replace(
'<script src="main.js"></script>', '<script src="main.js"></script>',
@ -122,13 +147,13 @@ export default function createServer(root = '', conf = {}) {
case 'vue': case 'vue':
{ {
pathname = pathname.replace(/^aseets\/js\//, '') let rpath = pathname.replace(/^assets\/js\//, '')
let file let file
if (pathname.startsWith(currentPage)) { if (rpath.startsWith(currentPage)) {
file = join(conf.pages, pathname) file = join(pagesDir, rpath)
} else { } else {
file = join(root, pathname) file = join(root, rpath)
} }
if (!fs.isfile(file)) { if (!fs.isfile(file)) {
@ -136,8 +161,7 @@ export default function createServer(root = '', conf = {}) {
} }
// console.log('>>>>', file) // console.log('>>>>', file)
code = compileVue(file) code = compileVue(file, conf, { IS_MPA, currentPage, root, pagesDir })
res.setHeader('content-type', MIME_TYPES.js) res.setHeader('content-type', MIME_TYPES.js)
} }
break break
@ -145,7 +169,7 @@ export default function createServer(root = '', conf = {}) {
case 'scss': case 'scss':
case 'css': case 'css':
{ {
let file = join(root, pathname.replace(/^aseets\/css\//, '')) let file = join(root, pathname.replace(/^assets\/css\//, ''))
code = compileScss(file) code = compileScss(file)
res.setHeader('content-type', MIME_TYPES.css) res.setHeader('content-type', MIME_TYPES.css)
} }
@ -153,10 +177,10 @@ export default function createServer(root = '', conf = {}) {
case 'js': case 'js':
{ {
pathname = pathname.replace(/^aseets\/js\//, '') pathname = pathname.replace(/^assets\/js\//, '')
let file let file
if (pathname.startsWith(currentPage)) { if (pathname.startsWith(currentPage)) {
file = join(conf.pages, pathname) file = join(pagesDir, pathname)
} else { } else {
file = join(root, pathname) file = join(root, pathname)
} }
@ -166,13 +190,24 @@ export default function createServer(root = '', conf = {}) {
file = file.replace(/\.js$/, '/index.js') file = file.replace(/\.js$/, '/index.js')
code = fs.cat(file) code = fs.cat(file)
} }
console.log(req.url, '>>>>', file)
code = parseJs(code + '') code = parseJs(code + '')
res.setHeader('content-type', MIME_TYPES.js) res.setHeader('content-type', MIME_TYPES.js)
} }
break break
case 'png':
case 'jpg':
case 'jpeg':
case 'webp':
case 'gif':
case 'svg':
case 'ico':
case 'bmp':
res.setHeader('content-type', MIME_TYPES[ext])
code = fs.cat(join(root, pathname))
break
default: default:
res.setHeader('content-type', MIME_TYPES[ext] || MIME_TYPES.other) res.setHeader('content-type', MIME_TYPES[ext] || MIME_TYPES.other)
break break
@ -180,7 +215,7 @@ export default function createServer(root = '', conf = {}) {
res.setHeader('content-length', Buffer.byteLength(code)) res.setHeader('content-length', Buffer.byteLength(code))
res.writeHead(200, 'OK') res.writeHead(200, 'OK')
res.end(code + '') res.end(code)
} }
}) })
.listen(conf.port) .listen(conf.port)

10
lib/index.js
View File

@ -1,10 +0,0 @@
/**
* {vue live开发环境}
* @author yutent<yutent.io@gmail.com>
* @date 2022/08/31 18:00:37
*/
import createServer from './dev.js'
import compile from './prod.js'
export { createServer, compile }

1
package.json
View File

@ -1,6 +1,7 @@
{ {
"name": "@bytedo/vue-live", "name": "@bytedo/vue-live",
"type": "module", "type": "module",
"version": "0.0.1",
"dependencies": { "dependencies": {
"iofs": "^1.5.2", "iofs": "^1.5.2",
"@bytedo/sass": "^1.54.8" "@bytedo/sass": "^1.54.8"