diff --git a/.gitignore b/.gitignore
index ada18b8fd4..d1469fcd87 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
diff --git a/build/build.js b/build/build.js
index c96fe663ff..ff2ef08bc1 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'))
diff --git a/entry.js b/entry.js
new file mode 100644
index 0000000000..d53e897e06
--- /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
diff --git a/html5/render/vue/README.md b/html5/render/vue/README.md
index 07286be4e2..f9ac2dec1b 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 `` 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.
diff --git a/package.json b/package.json
index f3444751db..fe8a269f3d 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",
diff --git a/vue.html b/vue.html
index cf2e264091..bccdd30633 100644
--- a/vue.html
+++ b/vue.html
@@ -46,10 +46,12 @@
-
-
+
+
-
+
+
+