Skip to content

15.how-to.transform-code-into-js-bundle.md

Latest commit

 

History

History
107 lines (71 loc) · 2.87 KB

15.how-to.transform-code-into-js-bundle.md

File metadata and controls

107 lines (71 loc) · 2.87 KB

将 .we 源代码转换成 JS Bundle

在前面的章节中你已经了解到如何编写及组织 Weex 代码，如果你还有疑问，可参考 语法 及 手册。 但是，Weex 语法的代码必须转换为 JSBundle，以便 Weex JSFramework 可以在 iOS，Android 和浏览器端解析和执行。了解更多信息，可参考 Weex 工作原理 和 JS Bundle 格式

现在，回到将 .we 源代码转换成 JS Bundle 的主题。有几种方法来实现这一目标。

使用 weex-toolkit

如果你已经有了 node.js 开发环境，可以直接使用以下命令。关于 node.js 及其他依赖安装可参考安装依赖

$npm install -g weex-toolkit

将 .we 文件转换为 JS Bundle

$ weex your_best_weex.we  -o .

your_best_weex.we 将会被转换为 your_best_weex.js 并保存在当前目录。

将 .we 文件转换为 JS Bundle 并开启 watch 功能，实时自动转换

$ weex your_best_weex.we  -o . --watch

将所有 .we 文件转换到一个目录中

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

we/file/storage/path 目录下的每个 .we 文件都会被转换为 JS Bundle 并保存到 outputpath 目录。

请访问 npmjs.com 了解更多关于 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 */', '.', {})

参数：

  • name {string}：当前 bundle 文件名

  • code {string}：源码

  • path {string}： 可选，当在某个路径中查找自定义组件时很有用

  • elements {Object}：可选，存在的自定义组件映射

  • config {Object}：可选

    • oldFormat {boolean}：是否转换为旧格式 （默认：false）
    • isEntry {boolean}：是否是具有 bootstrap 的入口模块 （默认：true）

返回值:

  • 一个对象：

    • result {string}：所有自定义组件的 define() 方法和最终的 bootstrap()
    • logs {Array}：相应的警告和错误日志

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'))
    })

参数:
  • oldFormat {boolean}：是否转换为旧格式 （默认：false）
  • isEntry {boolean}：是否是具有 bootstrap 的入口模块 （默认：true）