From bd3cb6930dc1fb685293d1fd33d9983b6dd45a07 Mon Sep 17 00:00:00 2001 From: dntzhang Date: Thu, 3 Oct 2019 19:20:45 +0800 Subject: [PATCH] fix: fix omi-mp build error --- packages/omi-cli/package.json | 2 +- packages/omi-cli/template/mp/gulpfile.js | 230 ++++++++++++------ packages/omi-mp/gulpfile.js | 17 +- .../src/mp/components/my-child/my-child.js | 88 +++---- .../omi-mp/src/mp/components/my-ele/my-ele.js | 88 +++---- packages/omi-mp/src/mp/pages/index/index.js | 1 + packages/omi-mp/src/mp/pages/logs/logs.js | 7 +- 7 files changed, 267 insertions(+), 166 deletions(-) diff --git a/packages/omi-cli/package.json b/packages/omi-cli/package.json index a1a5c7a25..ed658181f 100755 --- a/packages/omi-cli/package.json +++ b/packages/omi-cli/package.json @@ -1,6 +1,6 @@ { "name": "omi-cli", - "version": "3.4.8", + "version": "3.4.9", "description": "Create website, app with no build configuration. be friendly to [Omi](https://github.com/Tencent/omi) framework.", "main": "bin/omi", "engines": { diff --git a/packages/omi-cli/template/mp/gulpfile.js b/packages/omi-cli/template/mp/gulpfile.js index 1af6d4d00..1efd8c2e2 100644 --- a/packages/omi-cli/template/mp/gulpfile.js +++ b/packages/omi-cli/template/mp/gulpfile.js @@ -1,4 +1,4 @@ -let gulp = require('gulp') +let gulp = require('gulp') let path = require('path') let tap = require('gulp-tap') let compile = require('./scripts/mp/index') @@ -6,89 +6,107 @@ let fs = require('fs') let compileWxss = require('./scripts/mp/wxss') var prettier = require('prettier') +const WXCOMPONENT_ENV = 'WXCOMPONENT'; + gulp.task('components', ['copy'], () => { + const isWxComponent = process.env.NODE_ENV === WXCOMPONENT_ENV; + const src = isWxComponent ? 'src/mp/components/**/*.js' : 'src/mp/components/*/*.js'; // 判断是否微信组件 + return gulp - .src('src/mp/components/*/*.js') + .src(src) .pipe( tap(file => { - let dir = path.dirname(file.path) + let dir = isWxComponent ? file.path.replace('.js', '') : path.dirname(file.path) let arr = dir.split(/\\|\//) let name = arr[arr.length-1] - if(path.basename(file.path) == name+'.js') { - let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8') - let json = require(dir + '/' + name + '.json') - let importStr = json2import(json) - let hyperscript = compile(wxml) - file.contents = Buffer.concat([ - Buffer.from( - `${importStr}import componentCss from './${name}.wxss' -import { h, WeElement, rpx } from 'omi' -import { setData } from '../../../utils/set-data' + let preName = arr[arr.length-2]; - ` - ), - Buffer.from( - file.contents - .toString() - .replace('Component({', - `const mpOption = function () { - return ({`)+` -}`), - Buffer.from(` -class Element extends WeElement { - static props = mpOption().properties + try{ + if(path.basename(file.path) == name+'.js') { + let filePathComponentDomStr = fileComponentDom(file.path); + let contentPath = isWxComponent ? dir : dir + '/' + name; + let wxml = fs.readFileSync(contentPath + '.wxml', 'utf8') + let js = fs.readFileSync(contentPath + '.js', 'utf8') + let json = require(contentPath + '.json') + let importStr = json2import(json, dir) + let hyperscript = compile(wxml) - data = mpOption().data + // 判断组件下面是不是压缩过 + if(js.includes('webpackBootstrap')){ + return + } - render = render + file.contents = Buffer.concat([ + Buffer.from( + `${importStr}import componentCss from './${name}.wxss' + import { h, WeElement, rpx } from 'omi' + import { setData } from ${isWxComponent && preName === 'components' ? "'../../utils/set-data'" : "'../../../utils/set-data'"} - css = css + ` + ), + Buffer.from( + file.contents + .toString() + .replace('Component({', + `const mpOption = function () { + return ({`)+` + }`), + Buffer.from(` + class Element extends WeElement { + static props = mpOption().properties - beforeRender() {} + data = mpOption().data - beforeUpdate() {} + render = render - afterUpdate() {} + css = css - install = function() { - this.properties = this.props - Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) - this._mpOption = mpOption() - this._mpOption.created && this._mpOption.created.call(this) - Object.keys(this._mpOption.methods).forEach(key => { - if(typeof this._mpOption.methods[key] === 'function'){ - this[key] = this._mpOption.methods[key].bind(this) - } - }) - } + beforeRender() {} - uninstall = mpOption().detached || function() {} + beforeUpdate() {} - installed = function() { - this._mpOption.attached && this._mpOption.attached.call(this) - this._mpOption.ready && this._mpOption.ready.call(this) - } + afterUpdate() {} - adoptedCallback = mpOption().moved || function() {} - - triggerEvent = function(name, data) { - this.fire(name, data) - } - - setData = setData -} - -function css() { - return rpx(componentCss) -} - -${prettier.format(hyperscript, { parser: "babel" })} - -customElements.define('${name}', Element) - `) - ]) + install = function() { + this.properties = this.props + Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) + this._mpOption = mpOption() + this._mpOption.created && this._mpOption.created.call(this) + Object.keys(this._mpOption.methods).forEach(key => { + if(typeof this._mpOption.methods[key] === 'function'){ + this[key] = this._mpOption.methods[key].bind(this) } }) + } + + uninstall = mpOption().detached || function() {} + + installed = function() { + this._mpOption.attached && this._mpOption.attached.call(this) + this._mpOption.ready && this._mpOption.ready.call(this) + } + + adoptedCallback = mpOption().moved || function() {} + + triggerEvent = function(name, data) { + this.fire(name, data) + } + + setData = setData + } + + function css() { + return rpx(componentCss) + } + + ${prettier.format(hyperscript, { parser: "babel" })} + + customElements.define('${filePathComponentDomStr}', Element) + `) + ]) + } + }catch(e){} + }) ) .pipe(gulp.dest('src/mp/components/')) }) @@ -107,9 +125,10 @@ gulp.task('pages', ['copy'], () => { let name = arr[arr.length-1] if(path.basename(file.path) == name+'.js') { let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8') - let hyperscript = compile(wxml) let json = require(dir + '/' + name + '.json') - let importStr = json2import(json) + let hyperscript = compile(replaceWxmlComponentHtml(dir, wxml,json)) + + let importStr = json2import(json, dir) file.contents = Buffer.concat([ Buffer.from( `${importStr}import appCss from '../../app.wxss' @@ -122,7 +141,7 @@ import { setData } from '../../../utils/set-data' Buffer.from( file.contents .toString() - .replace('Page({', + .replace('Page({', `const mpOption = function () { return ({`)+` }` @@ -143,6 +162,7 @@ class Element extends WeElement { install() { this.properties = this.props + this.data = this.data || {}; Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) this._mpOption = mpOption() Object.keys(this._mpOption).forEach(key => { @@ -251,7 +271,44 @@ function route(arr) { return result.join('\r\n') } -function json2import(json) { +// 打包生成web component 转换统一src 路径 +function fileComponentDom(filePth) { + let filePathArray = filePth.replace(__dirname, '').replace('.js', '').split('/'); + filePathArray.shift(); + + return 'wx-h5-' + filePathArray.join('-'); +} + +// 组件转换绝对路径 不再需要依赖强匹配目录文件夹 +function replaceComponentOnPath(tag, str, tagName) { + const reg = new RegExp(`<(${tag})(?=\\s)|<(\\/${tag})>`, 'g'); + + return str.replace(reg, function(match, $1, $2) { + if ($1) { + return '<' + tagName; + } + return '' + }); +} + +// 匹配转换html 转换 目录文件夹名字 +function replaceWxmlComponentHtml(dir, html,json) { + if(json.usingComponents){ + Object.keys(json.usingComponents).forEach((key, i) => { + html = replaceComponentOnPath( + key, + html, + fileComponentDom(path.join(dir, json.usingComponents[key])) + ); + }) + } + + + return html; +} + + +function json2import(json, dir) { let arr = [] if (json.usingComponents) { Object.keys(json.usingComponents).forEach(key => { @@ -259,6 +316,40 @@ function json2import(json) { }) } return arr.join('\r\n') + '\r\n' +// let arr = [] +// if (json.usingComponents) { + +// Object.keys(json.usingComponents).forEach(key => { +// let usingArry = path.resolve(dir, json.usingComponents[key]).split('/'); +// usingArry.pop(); +// let wxssPath = ''; + +// try{ +// let indexWsxx = [...usingArry, 'index.wxss'].join('/'); +// fs.statSync(indexWsxx); +// wxssPath = json.usingComponents[key]; +// }catch(e){ + +// } + +// try{ +// let keyWsxx = [...usingArry, key + '.wxss'].join('/'); +// fs.statSync(keyWsxx); +// wxssPath = keyWsxx; +// }catch(e){ + +// } + +// wxssPath && arr.push(`import '${wxssPath}'`) + +// // let wxml = fs.readFileSync(wxssPath, 'utf8') +// // console.log(Buffer.from(compileWxss(wxml))) + +// // arr.push(Buffer.from(compileWxss(wxml))) +// arr.push(`import '${json.usingComponents[key]}'`) +// }) +// } +// return arr.join('\r\n') + '\r\n' } function list2require(list) { @@ -323,3 +414,4 @@ gulp.task('app-wxss', ['copy'], () => { }) gulp.task('default', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route', 'watch']) +gulp.task('build', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route']) diff --git a/packages/omi-mp/gulpfile.js b/packages/omi-mp/gulpfile.js index e392f3432..1efd8c2e2 100644 --- a/packages/omi-mp/gulpfile.js +++ b/packages/omi-mp/gulpfile.js @@ -293,13 +293,16 @@ function replaceComponentOnPath(tag, str, tagName) { // 匹配转换html 转换 目录文件夹名字 function replaceWxmlComponentHtml(dir, html,json) { - Object.keys(json.usingComponents).forEach((key, i) => { - html = replaceComponentOnPath( - key, - html, - fileComponentDom(path.join(dir, json.usingComponents[key])) - ); - }) + if(json.usingComponents){ + Object.keys(json.usingComponents).forEach((key, i) => { + html = replaceComponentOnPath( + key, + html, + fileComponentDom(path.join(dir, json.usingComponents[key])) + ); + }) + } + return html; } diff --git a/packages/omi-mp/src/mp/components/my-child/my-child.js b/packages/omi-mp/src/mp/components/my-child/my-child.js index 817e29b2b..16c218213 100644 --- a/packages/omi-mp/src/mp/components/my-child/my-child.js +++ b/packages/omi-mp/src/mp/components/my-child/my-child.js @@ -1,11 +1,11 @@ import componentCss from './my-child.wxss' -import { h, WeElement, rpx } from 'omi' -import { setData } from '../../../utils/set-data' + import { h, WeElement, rpx } from 'omi' + import { setData } from '../../../utils/set-data' - // components/my-child/my-child.js + // components/my-child/my-child.js const mpOption = function () { - return ({ + return ({ /** * 组件的属性列表 */ @@ -28,58 +28,58 @@ const mpOption = function () { } }) -} -class Element extends WeElement { - static props = mpOption().properties + } + class Element extends WeElement { + static props = mpOption().properties - data = mpOption().data + data = mpOption().data - render = render + render = render - css = css + css = css - beforeRender() {} + beforeRender() {} - beforeUpdate() {} + beforeUpdate() {} - afterUpdate() {} + afterUpdate() {} - install = function() { - this.properties = this.props - Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) - this._mpOption = mpOption() - this._mpOption.created && this._mpOption.created.call(this) - Object.keys(this._mpOption.methods).forEach(key => { - if(typeof this._mpOption.methods[key] === 'function'){ - this[key] = this._mpOption.methods[key].bind(this) - } - }) + install = function() { + this.properties = this.props + Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) + this._mpOption = mpOption() + this._mpOption.created && this._mpOption.created.call(this) + Object.keys(this._mpOption.methods).forEach(key => { + if(typeof this._mpOption.methods[key] === 'function'){ + this[key] = this._mpOption.methods[key].bind(this) + } + }) + } + + uninstall = mpOption().detached || function() {} + + installed = function() { + this._mpOption.attached && this._mpOption.attached.call(this) + this._mpOption.ready && this._mpOption.ready.call(this) + } + + adoptedCallback = mpOption().moved || function() {} + + triggerEvent = function(name, data) { + this.fire(name, data) + } + + setData = setData } - uninstall = mpOption().detached || function() {} - - installed = function() { - this._mpOption.attached && this._mpOption.attached.call(this) - this._mpOption.ready && this._mpOption.ready.call(this) + function css() { + return rpx(componentCss) } - adoptedCallback = mpOption().moved || function() {} - - triggerEvent = function(name, data) { - this.fire(name, data) - } - - setData = setData -} - -function css() { - return rpx(componentCss) -} - -function render() { + function render() { return h("span", null, [`I am child component`]); } -customElements.define('my-child', Element) - \ No newline at end of file + customElements.define('wx-h5-src-mp-components-my-child-my-child', Element) + \ No newline at end of file diff --git a/packages/omi-mp/src/mp/components/my-ele/my-ele.js b/packages/omi-mp/src/mp/components/my-ele/my-ele.js index 1cf32cad4..38745a6a4 100644 --- a/packages/omi-mp/src/mp/components/my-ele/my-ele.js +++ b/packages/omi-mp/src/mp/components/my-ele/my-ele.js @@ -1,11 +1,11 @@ import '../my-child/my-child' import componentCss from './my-ele.wxss' -import { h, WeElement, rpx } from 'omi' -import { setData } from '../../../utils/set-data' + import { h, WeElement, rpx } from 'omi' + import { setData } from '../../../utils/set-data' - // components/my-ele/my-ele.js + // components/my-ele/my-ele.js const mpOption = function () { - return ({ + return ({ /** * 组件的属性列表 */ @@ -37,55 +37,55 @@ const mpOption = function () { } }) -} -class Element extends WeElement { - static props = mpOption().properties + } + class Element extends WeElement { + static props = mpOption().properties - data = mpOption().data + data = mpOption().data - render = render + render = render - css = css + css = css - beforeRender() {} + beforeRender() {} - beforeUpdate() {} + beforeUpdate() {} - afterUpdate() {} + afterUpdate() {} - install = function() { - this.properties = this.props - Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) - this._mpOption = mpOption() - this._mpOption.created && this._mpOption.created.call(this) - Object.keys(this._mpOption.methods).forEach(key => { - if(typeof this._mpOption.methods[key] === 'function'){ - this[key] = this._mpOption.methods[key].bind(this) - } - }) + install = function() { + this.properties = this.props + Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) + this._mpOption = mpOption() + this._mpOption.created && this._mpOption.created.call(this) + Object.keys(this._mpOption.methods).forEach(key => { + if(typeof this._mpOption.methods[key] === 'function'){ + this[key] = this._mpOption.methods[key].bind(this) + } + }) + } + + uninstall = mpOption().detached || function() {} + + installed = function() { + this._mpOption.attached && this._mpOption.attached.call(this) + this._mpOption.ready && this._mpOption.ready.call(this) + } + + adoptedCallback = mpOption().moved || function() {} + + triggerEvent = function(name, data) { + this.fire(name, data) + } + + setData = setData } - uninstall = mpOption().detached || function() {} - - installed = function() { - this._mpOption.attached && this._mpOption.attached.call(this) - this._mpOption.ready && this._mpOption.ready.call(this) + function css() { + return rpx(componentCss) } - adoptedCallback = mpOption().moved || function() {} - - triggerEvent = function(name, data) { - this.fire(name, data) - } - - setData = setData -} - -function css() { - return rpx(componentCss) -} - -function render() { + function render() { const { name, age } = this.data; return h("div", null, [ h("button", { ontap: this.myMethods, onclick: this.myMethods }, [ @@ -97,5 +97,5 @@ function render() { } -customElements.define('my-ele', Element) - \ No newline at end of file + customElements.define('wx-h5-src-mp-components-my-ele-my-ele', Element) + \ No newline at end of file diff --git a/packages/omi-mp/src/mp/pages/index/index.js b/packages/omi-mp/src/mp/pages/index/index.js index 46eed493a..03e1cd54f 100644 --- a/packages/omi-mp/src/mp/pages/index/index.js +++ b/packages/omi-mp/src/mp/pages/index/index.js @@ -89,6 +89,7 @@ class Element extends WeElement { install() { this.properties = this.props + this.data = this.data || {}; Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) this._mpOption = mpOption() Object.keys(this._mpOption).forEach(key => { diff --git a/packages/omi-mp/src/mp/pages/logs/logs.js b/packages/omi-mp/src/mp/pages/logs/logs.js index 7c6889a8c..52e305bbd 100644 --- a/packages/omi-mp/src/mp/pages/logs/logs.js +++ b/packages/omi-mp/src/mp/pages/logs/logs.js @@ -51,6 +51,7 @@ class Element extends WeElement { install() { this.properties = this.props + this.data = this.data || {}; Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) this._mpOption = mpOption() Object.keys(this._mpOption).forEach(key => { @@ -87,7 +88,11 @@ function render() { h("span", { class: `log-item` }, [`by omi-mp`]) ); }), - h("my-ele", { onmyevent: this.myEventHandler, name: `dntzhang` }, []), + h( + "wx-h5-src-mp-components-my-ele-my-ele", + { onmyevent: this.myEventHandler, name: `dntzhang` }, + [] + ), h("img", { src: require("../../images/wechat.png") }, []) ]); }