加载中...

1.3.7 Transform Code Into JS Bundle


Transform Code into Js Bundle

Paragraphs Maintain Your Component Code and Require 3rd Party Libs show us how to write and organize weex code. However, Weex DSL code must be transformed to js bundle so that js framework can parse and execute it for iOS, Android and HTML5 portal. For more information, please refer to How It Works and JS Bundle Format.

Now come back to the topic transform code into js bundle. There are several ways to achieve the goal.

weex-toolkit

$npm install -g weex-toolkit 

transform a we file to JS Bundle

$weex your_best_weex.we  -o . 

your_best_weex.we will be transform to JS Bundle file your_best_weex.js , saved in your current directory

transform a we file to JS Bundle , watch this file ,auto run transformer if change happen.

$weex your_best_weex.we  -o . --watch 

transform every we file in a directory

$weex we/file/storage/path  -o outputpath 

every we file in we/file/storage/path will be transformed to JS Bundle , saved in outputpath path

please access npmjs.com for more information about weex-toolkit.

transformer

npm install weex-transformer 

CLI Tool

 Usage: transformer [options] <file...>

  Options:

    -h, --help               output usage information
    -V, --version            output the version number
    -l, --oldFormat [value]  whether to transform to old format (default: false)
    -e, --isEntry [value]    whether is an entry module which has `bootstrap` (default: true)
    -o, --output [path]      the output file dirname 

API

transform(name, code, path, elements, config)

var transformer = require('weex-transformer') var output = transformer.transform('foo', '/* code here */', '.', {}) 

params:

  • name: string, current bundle name
  • code: string, source code
  • path: string optional, useful when find custom component in a certain path
  • elements: object optional, existed custom component map
  • config: object optional
    • oldFormat: whether to transform to old format (default: false)
    • isEntry: whether is an entry module which has bootstrap (default: true)

returns:

  • an object with keys
    • result: string, all custom components define() and final bootstrap()
    • logs: array, corresponding warning & error logs

gulp weex

npm install gulp-weex 
var gulp = require('gulp') var weex = require('gulp-weex')

gulp.task('default', function () { return gulp.src('src/*.html')
    .pipe(weex({}))
    .pipe(gulp.dest('./dest'))
}) 

Options:

  • oldFormat: whether to transform to old format (default: false)
  • isEntry: whether is an entry module which has bootstrap (default: true)

还没有评论.