Weex是一个基于 Vue.js 的跨平台移动开发框架，Weex Pack 是一个可用于 native 跑通 Weex 页面的打包工具。本文将会介绍如何通过NPM包weex-pack来进行Weex页面的打包操作。
安装 Weex Pack
在开始使用 Weex Pack 前，我们需要先进行安装。通过以下命令安装 weex-pack:
npm install weex-pack -g
基本用法
初始化
在使用Weex Pack之前，需要先创建一个项目。通过以下命令可以初始化一个 Weex 项目：
weex-pack init
执行这个命令会提示你输入项目名称，选择创建的项目类型以及版本号。创建完毕后，你会在项目根目录下看到以下内容：
-- -------------------- ---- ------- ------------ -- ---- - -- -------- - -- -------- - -- --- -- ----- -- ------- -- ------------ -- --------------
打包
在创建完 Weex 项目后，接下来需要进行页面的打包和发布。通过以下命令可以对项目进行打包：
weex-pack build
执行该命令后，Weex-Pack会扫描项目下的入口文件并进行打包。打包完成后，你会在 dist 目录下看到打包后生成的文件。
发布
我们可以使用 Xcode 或者 Android Studio 将打包后的文件生成 APP 安装包发布到相应平台上，也可以将 dist 目录下生成的文件部署到服务器用于线上预览。
配置
Weex Pack 默认会扫描项目根目录下的 weex.config.js 文件，用于指定项目的相关配置。以下是一个示例的配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
------- ----------------------- -------
----- ----------------
--------- ------
--
------- -
----- -----
----- ----------
---------------- -----
--
--- srcDir: 配置源文件目录
- main: 配置入口文件
- platform: 配置打包平台
- server.port: 启动的服务端口号
- server.host: 启动服务的主机地址
Weex-pack应用示例
下面是一个简单的 Weex 页面示例：
-- -------------------- ---- -------
----------
-----
-------------------
------ -------------------------------------- --
------
-----------
--------
------ ------- -
------ -
------ -
------ --------
--
--
--
---------保存该文件为 index.vue，我们可以在 app 目录下的 entry.js 中引入这个组件并启动服务。Entry.js 的代码如下：
import App from './index.vue'; App.el = '#root'; new Vue(App);
在终端执行 weex-pack build 生成打包后的文件，通过 Xcode 或者 Android Studio 安装到对应移动设备上就可以预览到这个页面了。
总结
在本文中，我们学习了如何通过 NPM 包 weex-pack 进行 Weex 页面的打包和发布。通过学习我们了解了 Weex 基本开发流程和 weex-pack 的使用方式，希望本文对读者有所帮助。
参考文献
- 官方文档：https://weex.apache.org/cn/guide/tools/tools.html
- Weex-Pack GitHub主页：https://github.com/weex-pack/weex-pack
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffde04
