[jsfm] Adjust the file structure and build scripts of js framework

build/build.js

@@ -16,23 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-"use strict"
 
 const fs = require('fs')
 const path = require('path')
-const gzip = require('zlib').createGzip()
-const pkg = require('../package.json')
 const rollup = require('rollup')
 const watch = require('rollup-watch')
-const webpack = require('webpack')
-
 const getConfig = require('./config')
 
-// create dist folder
-if (!fs.existsSync('dist')) {
-  fs.mkdirSync('dist')
-}
-
 let isWatch = false
 if (process.argv[3]) {
   isWatch = process.argv[3] === '--watch' || process.argv[3] === '-w'
@@ -46,100 +36,66 @@ else {
   console.log('\nPlease specify the package you want to build. [native, runtime, browser, vue]')
 }
 
-function extend(to, ...froms) {
-  froms.forEach(function (from) {
-    for (const key in from) {
-      if (from.hasOwnProperty(key)) {
-        to[key] = from[key]
-      }
-    }
-  })
-  return to
-}
-
-function runRollupOnWatch(config) {
+function runRollupOnWatch (config) {
   const watcher = watch(rollup, config)
   watcher.on('event', event => {
-    switch ( event.code ) {
-      case 'STARTING':
-        console.log('checking rollup-watch version...')
-        break
-
-      case 'BUILD_START':
-        console.log('bundling...')
-        break
-
-      case 'BUILD_END':
+    switch (event.code) {
+      case 'STARTING': console.log('checking rollup-watch version...'); break
+      case 'BUILD_START': console.log('bundling...'); break
+      case 'BUILD_END': {
         console.log('bundled in ' + path.relative(process.cwd(), config.dest)
           + ' (' + event.duration + 'ms)')
-        console.log('Watching for changes...' )
-        break
-
-      case 'ERROR':
-        console.error('ERROR: ', event.error)
-        break
-
-      default:
-        console.error('unknown event', event)
+        console.log('Watching for changes...')
+      } break
+      case 'ERROR': console.error('ERROR: ', event.error); break
+      default: console.error('unknown event', event)
     }
   })
 }
 
-function runRollup (config) {
-  return new Promise((resolve, reject) => {
-    rollup.rollup(config).then(bundle => {
-      bundle.write(config).then(() => {
-        report(config.dest)
-        resolve()
-      })
-    })
-  })
+async function runRollup (config) {
+  const bundle = await rollup.rollup(config)
+  const outputOptions = config.output
+  if (Array.isArray(outputOptions)) {
+    for (let i = 0; i < outputOptions.length; ++i) {
+      await bundle.write(outputOptions[i])
+      report(outputOptions[i].output.file)
+    }
+  }
+  else {
+    await bundle.write(outputOptions)
+    report(outputOptions.file)
+  }
 }
 
-function build (name) {
+async function build (name) {
   let pkgName = 'weex-js-framework'
   switch (name) {
-    case 'native': pkgName = 'weex-js-framework'; break;
-    case 'runtime': pkgName = 'weex-js-runtime'; break;
-    case 'legacy': pkgName = 'weex-legacy-framework'; break;
-    case 'vanilla': pkgName = 'weex-vanilla-framework'; break;
+    case 'native': pkgName = 'weex-js-framework'; break
+    case 'vue': pkgName = 'weex-vue'; break
+    case 'rax': pkgName = 'weex-rax'; break
+    case 'runtime': pkgName = 'weex-js-runtime'; break
+    case 'legacy': pkgName = 'weex-legacy-framework'; break
+    case 'vanilla': pkgName = 'weex-vanilla-framework'; break
   }
 
   const config = getConfig(pkgName)
   const minifyConfig = getConfig(pkgName, true)
+  const ES6Config = getConfig(pkgName, false, true)
+  const ES6MinifyConfig = getConfig(pkgName, true, true)
 
   if (isWatch) {
-    return runRollupOnWatch(config)
+    return await runRollupOnWatch(config)
   }
   else {
-    console.log(`\n => start to build ${name} (${pkgName})\n`)
-    return new Promise((resolve, reject) => {
-      return runRollup(config).then(() => {
-        let p = Promise.resolve()
-        return p.then(function () {
-          return runRollup(minifyConfig).then(() => {
-            zip(minifyConfig.dest, resolve)
-          })
-        })
-      })
-    })
+    console.log(`\n => start to build ${pkgName}\n`)
+    await runRollup(config)
+    await runRollup(minifyConfig)
+    await runRollup(ES6Config)
+    await runRollup(ES6MinifyConfig)
   }
 }
 
-function zip (filePath, callback) {
-  const read = fs.createReadStream(filePath)
-  const write = fs.createWriteStream(filePath + '.gz')
-  read.pipe(gzip).pipe(write).on('close', () => {
-    report(filePath + '.gz')
-    callback && callback()
-  })
-}
-
-function now () {
-  const time = Date.now() - (new Date()).getTimezoneOffset() * 60000
-  return (new Date(time)).toISOString().replace('T', ' ').substring(0, 16)
-}
-
 function report (filePath) {
   const size = (fs.statSync(filePath).size / 1024).toFixed(2) + 'KB'
   const file = path.relative(process.cwd(), filePath)

build/config.js

@@ -1,4 +1,3 @@
-
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -17,106 +16,126 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 const path = require('path')
 const json = require('rollup-plugin-json')
 const eslint = require('rollup-plugin-eslint')
 const replace = require('rollup-plugin-replace')
 const nodeResolve = require('rollup-plugin-node-resolve')
 const uglify = require('rollup-plugin-uglify')
+const uglifyES = require('uglify-es')
 const commonjs = require('rollup-plugin-commonjs')
 const buble = require('rollup-plugin-buble')
-const subversion = require('../package.json').subversion
+const packageJSON = require('../package.json')
+const deps = packageJSON.dependencies
+const subversion = packageJSON.subversion
 
 const frameworkBanner = `;(this.getJSFMVersion = function()`
   + `{return "${subversion.framework}"});\n`
-  + `var global = this, process = { env: {} };var setTimeout = global.setTimeout;\n`
+  + `var global = this; var process = {env:{}}; var setTimeout = global.setTimeout;\n`
 
 const configs = {
   'weex-js-framework': {
-    moduleName: 'Weex',
-    entry: absolute('html5/render/native/index.js'),
-    dest: absolute('packages/weex-js-framework/index.js'),
-    banner: `(this.nativeLog || function(s) {console.log(s)})`
-      + `('START JS FRAMEWORK ${subversion.framework}, Build ${now()}.');\n`
-      + frameworkBanner,
-    format: 'umd',
-    plugins: [
-      nodeResolve({
-        jsnext: true,
-        main: true
-      }),
-    ]
+    input: absolute('runtime/entries/index.js'),
+    output: {
+      name: 'Weex',
+      file: absolute('pre-build/weex-js-framework'),
+      banner: `(this.nativeLog || function(s) {console.log(s)})`
+        + `('START JS FRAMEWORK ${subversion.framework}, Build ${now()}. `
+        + `(Vue: ${deps['weex-vue-framework']}, Rax: ${deps['weex-rax-framework']})');\n`
+        + frameworkBanner
+    }
+  },
+  'weex-vue': {
+    input: absolute('runtime/entries/vue.js'),
+    output: {
+      name: 'WeexVue',
+      file: absolute('pre-build/weex-vue'),
+      banner: `(this.nativeLog || function(s) {console.log(s)})`
+        + `('Weex JS Framework ${subversion.framework}, Build ${now()}. `
+        + `(Vue: ${deps['weex-vue-framework']})');\n`
+        + frameworkBanner
+    }
+  },
+  'weex-rax': {
+    input: absolute('runtime/entries/rax.js'),
+    output: {
+      name: 'WeexRax',
+      file: absolute('pre-build/weex-rax'),
+      banner: `(this.nativeLog || function(s) {console.log(s)})`
+        + `('Weex JS Framework ${subversion.framework}, Build ${now()}. `
+        + `(Rax: ${deps['weex-rax-framework']})');\n`
+        + frameworkBanner
+    }
   },
   'weex-js-runtime': {
-    moduleName: 'WeexRuntime',
-    entry: absolute('html5/runtime/index.js'),
-    dest: absolute('packages/weex-js-runtime/index.js'),
-    banner: `/* WEEX JS RUNTIME ${subversion.framework}, Build ${now()}. */\n\n`,
-    format: 'umd',
-    plugins: [
-      nodeResolve({
-        jsnext: true,
-        main: true
-      }),
-    ]
+    input: absolute('runtime/api/index.js'),
+    output: {
+      name: 'WeexJSRuntime',
+      file: absolute('packages/weex-js-runtime/index'),
+      banner: `/* Weex JS Runtime ${subversion.framework}, Build ${now()}. */\n\n`
+    }
   },
   'weex-legacy-framework': {
-    moduleName: 'WeexLegacyFramework',
-    entry: absolute('html5/frameworks/legacy/index.js'),
-    dest: absolute('packages/weex-legacy-framework/index.js'),
-    banner: `/* Weex Legacy Framework ${subversion.framework}, Build ${now()}. */\n`,
-    format: 'umd',
-    plugins: [
-      nodeResolve({
-        jsnext: true,
-        main: true
-      }),
-    ]
+    input: absolute('runtime/frameworks/legacy/index.js'),
+    output: {
+      name: 'WeexLegacyFramework',
+      file: absolute('packages/weex-legacy-framework/index'),
+      banner: `/* Weex Legacy Framework ${subversion.framework}, Build ${now()}. */\n`
+    }
   },
   'weex-vanilla-framework': {
-    moduleName: 'WeexVanillaFramework',
-    entry: absolute('html5/frameworks/vanilla/index.js'),
-    dest: absolute('packages/weex-vanilla-framework/index.js'),
-    banner: `/* Weex Vanilla Framework ${subversion.framework}, Build ${now()}. */\n`,
-    format: 'umd',
-    plugins: [
-      nodeResolve({
-        jsnext: true,
-        main: true
-      }),
-    ]
+    input: absolute('runtime/frameworks/vanilla/index.js'),
+    output: {
+      name: 'WeexVanillaFramework',
+      file: absolute('packages/weex-vanilla-framework/index'),
+      banner: `/* Weex Vanilla Framework ${subversion.framework}, Build ${now()}. */\n`
+    }
   }
 }
 
-function getConfig (name, minify) {
+function getConfig (name, minify, es6) {
   const opt = configs[name]
+  if (!opt.plugins) {
+    opt.plugins = []
+  }
+  const output = opt.output
+  const suffix = `${es6 ? '.es6' : ''}${minify ? '.min' : ''}.js`
   const config = {
-    moduleName: opt.moduleName,
-    entry: opt.entry,
-    dest: minify ? opt.dest && opt.dest.replace(/\.js$/, '.min.js') : opt.dest,
-    format: opt.format,
-    banner: opt.banner,
+    input: opt.input,
+    output: {
+      name: output.name,
+      file: output.file + suffix,
+      format: output.format || 'umd',
+      banner: output.banner
+    },
     plugins: opt.plugins.concat([
+      nodeResolve({ jsnext: true, main: true }),
       json(),
       replace({
-        'process.env.VIEWPORT_WIDTH': 750,
+        '__WEEX_VERSION__': JSON.stringify(subversion.framework),
         'process.env.NODE_ENV': JSON.stringify(minify ? 'production' : 'development'),
         'process.env.VUE_ENV': JSON.stringify('WEEX'),
+        'process.env.SUPPORT_ES2015': !!es6,
         'process.env.NODE_DEBUG': false
       }),
-      commonjs(),
-      buble()
+      commonjs()
     ])
   }
-
+  if (!es6) {
+    config.plugins.push(buble())
+  }
   if (minify) {
-    config.plugins.push(uglify())
+    config.output.sourcemap = true
+    config.plugins.push(es6
+      ? uglify({ safari10: true, toplevel: true }, uglifyES.minify)
+      : uglify()
+    )
   }
   else {
-    config.sourceMap = 'inline'
+    config.output.sourcemap = 'inline'
     config.plugins.unshift(eslint({ exclude: ['**/*.json', '**/*.css'] }))
   }
-
   return config
 }