+ [html5] add render built with weex-vue-bundle-tool.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/b50035e0 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/b50035e0 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/b50035e0 Branch: refs/heads/0.16-dev Commit: b50035e0c579439d29e6b8ac3c1b2aeba6e9b4dc Parents: ed20cdc Author: MrRaindrop <tekk...@gmail.com> Authored: Tue Jul 25 16:01:05 2017 +0800 Committer: MrRaindrop <tekk...@gmail.com> Committed: Tue Jul 25 16:01:05 2017 +0800 ---------------------------------------------------------------------- .gitignore | 3 +++ build/build.js | 59 ++++++++++++++++++++++++++++++++++++++++- entry.js | 11 ++++++++ html5/render/vue/README.md | 10 ++++++- package.json | 1 + vue.html | 8 +++--- 6 files changed, 87 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b50035e0/.gitignore ---------------------------------------------------------------------- diff --git a/.gitignore b/.gitignore index ada18b8..d1469fc 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,9 @@ examples/vue/test/ html5/browser/extend/packer.js html5/render/browser/extend/packer.js +# Created by weex-vue-bundle-util +weex-vue-plugins.js + android/playground/app/gradlew android/playground/app/gradlew.bat android/playground/app/gradle/wrapper/gradle-wrapper.jar http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b50035e0/build/build.js ---------------------------------------------------------------------- diff --git a/build/build.js b/build/build.js index c96fe66..ff2ef08 100644 --- a/build/build.js +++ b/build/build.js @@ -24,6 +24,10 @@ const gzip = require('zlib').createGzip() const pkg = require('../package.json') const rollup = require('rollup') const watch = require('rollup-watch') +const webpack = require('webpack') +const scan = require('weex-vue-bundle-util') +const webExamplesWebpackConfig = require('./webpack.examples.web.config') +const exec = require('child_process').execSync const getConfig = require('./config') @@ -111,6 +115,55 @@ function getAllEntries (rootDir) { }) } +function absolutePath (p) { + return path.join(__dirname, p) +} + +function buildForWebExamples (config, minifyConfig) { + config.entry = minifyConfig.entry = absolutePath('../entry.js') + config.dest = absolutePath('../dist/render.vue.js') + delete config.banner + config.plugins = config.plugins.filter(function (plugin) { + return plugin.name !== 'eslint' + }) + minifyConfig.dest = absolutePath('../dist/render.vue.min.js') + delete minifyConfig.banner + + // bundle web examples. + scan(webpack, webExamplesWebpackConfig) + .then(function (res) { + var pkgs = res.pkgs + var names = [] + var str = pkgs.map(function (pkgName) { + var name = pkgName + .replace('weex-vue-', '') + .replace(/-(\w)/g, function ($0, $1) { + return $1.toUpperCase() + }) + + 'Mod' + names.push(name) + try { + var version = require(`${pkgName}/package.json`).version + } catch (err) { + exec(`npm install ${pkgName}`) + } + return `import ${name} from '${pkgName}'\n` + }).join('') + str += `export default [\n${names.join(', \n')}\n]\n` + return fs.writeFileSync(absolutePath('../weex-vue-plugins.js'), str) + }) + .then(function () { + console.log(`\n => start to build weex-vue-render for examples.\n`) + return new Promise((resolve, reject) => { + runRollup(config).then(() => { + runRollup(minifyConfig).then(() => { + zip(minifyConfig.dest, resolve) + }) + }) + }) + }) +} + function build (name) { let pkgName = 'weex-js-framework' switch (name) { @@ -120,12 +173,16 @@ function build (name) { case 'vue': pkgName = 'weex-vue-render'; break; case 'vue-plugins': pkgName = 'weex-vue-render-plugins'; break; case 'vue-core': pkgName = 'weex-vue-render-core'; break; + case 'web-examples': pkgName = 'weex-vue-render-core'; break; } const config = getConfig(pkgName) const minifyConfig = getConfig(pkgName, true) - if (pkgName === 'weex-vue-render-plugins') { + if (name === 'web-examples') { + buildForWebExamples(config, minifyConfig) + } + else if (pkgName === 'weex-vue-render-plugins') { // build multiple packages in a loop. console.log(`\n => start to build ${name} (${pkgName})\n`) const entries = getAllEntries(path.join(__dirname, '../packages/weex-vue-plugins')) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b50035e0/entry.js ---------------------------------------------------------------------- diff --git a/entry.js b/entry.js new file mode 100644 index 0000000..d53e897 --- /dev/null +++ b/entry.js @@ -0,0 +1,11 @@ +import weex from './packages/weex-vue-render/dist/index.core' +import plugins from './weex-vue-plugins' + +// install plugins. +plugins.forEach(function (plugin) { + weex.install(plugin) +}) + +weex.init() + +export default weex http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b50035e0/html5/render/vue/README.md ---------------------------------------------------------------------- diff --git a/html5/render/vue/README.md b/html5/render/vue/README.md index 07286be..f9ac2de 100644 --- a/html5/render/vue/README.md +++ b/html5/render/vue/README.md @@ -84,7 +84,7 @@ These components have already integrated into render-core. You don't have to imp | weex-vue-geolocation | geolocation | | weex-vue-global-event | globalEvent | | weex-vue-modal | modal | -| weex-vue-navigator | navigator | +| weex-vue-nav | navigator | | weex-vue-storage | storage | | weex-vue-stream | stream | | weex-vue-websocket | websocket | @@ -94,6 +94,14 @@ Some of the above plugins may not be mentioned in weex documents. Just ignore th You can develop more plugins for your app. Accordingly the same plugin for other two platforms (iOS and Android) should also be built and intergrated in your app if you want it run on all three platforms. +#### scan your code + +Use `weex-vue-bundle-util` to scan you code, which will return a promise with a object to tell which components and modules you have used in your project, so that can generate a entry file accordingly to import those plugins. + +https://github.com/weexteam/weex-vue-bundle-util + +You can see the examples of weex built in this way by running the script `npm run build:vue:examples`, and use the `<script src="./dist/render.vue.js"></script>` as the render in the `vue.html` file. + ## use vue-loader to bundle .vue file NOTE: you should inject `$processStyle` to preprocess vnode's style in vue-loader's postTransformNode hook. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b50035e0/package.json ---------------------------------------------------------------------- diff --git a/package.json b/package.json index f344475..fe8a269 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "build:vue": "flow check && node build/build.js vue && npm run build:vue:core && npm run build:vue:plugins", "build:vue:core": "node build/build.js vue-core", "build:vue:plugins": "node build/build.js vue-plugins", + "build:vue:examples": "node build/build.js web-examples", "build:examples": "npm run build:examples:native && npm run build:examples:web", "build:examples:native": "webpack --config build/webpack.examples.config.js", "build:examples:web": "webpack --config build/webpack.examples.web.config.js", http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b50035e0/vue.html ---------------------------------------------------------------------- diff --git a/vue.html b/vue.html index cf2e264..bccdd30 100644 --- a/vue.html +++ b/vue.html @@ -46,10 +46,12 @@ </style> <!--<script src="./node_modules/vue/dist/vue.runtime.min.js"></script>--> - <script src="./node_modules/vue/dist/vue.runtime.js"></script> - <!--<script src="dist/vue.runtime.js"></script> --> + <script src="./node_modules/vue/dist/vue.runtime.js"></script> + <!--<script src="dist/vue.runtime.js"></script> --> <!-- <script src="./node_modules/weex-vue-render/index.min.js"></script> --> - <script src="./packages/weex-vue-render/dist/index.js"></script> + <script src="./packages/weex-vue-render/dist/index.js"></script> + <!--<script src="./dist/render.vue.js"></script>--> + <!--<script src="./dist/render.vue.min.js"></script>--> <!--<script src="./packages/weex-vue-render/dist/index.min.js"></script>--> </head> <body>
