Appearance

目录

创建一个全新应用 ​

1. 安装 Hummer CLI ​

请参考 Hummer CLI 使用教程

2. 创建 Android / iOS 原生模板工程 ​

shell
hummer init

// 输出以下内容，选择其中一种模块工程
? Which template do you want init? 
  template-android 
  template-ios

3. 创建 Vue / React / TS 模板工程 ​

shell
hummer init

// 输出以下内容，选择其中一种模块工程
? Which template do you want init? 
  template-vue 
  template-react
  template-ts
模板工程类型如何选择？
  • Hummer 模板工程（template-ts）：使用 TS 或 JS 语法，API 和代码架构都比较原始，更贴近客户端开发习惯，性能表现最好。
  • Tenon-Vue 模板工程（template-vue）：使用前端 Vue 框架，更贴近前端开发习惯，性能表现略差于 Hummer 工程。
  • Tenon-React 模板工程（template-react）：使用前端 React 框架，更贴近前端开发习惯，性能表现略差于 Hummer 工程。

Tenon 相关文档请参考 Tenon 文档。

4. 安装 npm 依赖包 ​

shell
cd <前端工程目录>
npm install

5. 配置工程输入输出文件 ​

配置根目录下的 hm.config.js 文件。

  • 配置入口源文件。 修改 webpack 节点内容，有以下三种方式：
    • 方式一：自定义通配符方式。所有 index.ts 都将变成入口文件，路径中间的 * 是最后编译产物的文件名，即 *.js。
    js
    webpack: {
  entries: "src/*/index.ts",
}
    • 方式二：自定义通配符方式。所有 ts 文件都将变成入口文件，最后 *.ts 中的 * 是最后编译产物的文件名，即 *.js。
    js
    webpack: {
  entries: "src/**/*.ts",
}
    • 方式三：Webpack 标准入口配置方式。冒号前面的 key 是最后编译生成的文件名，即 index.js 和 home.js。
    js
    webpack: {
  entry: {
      index: path.resolve(__dirname, './src/test/index.ts'),
      home: path.resolve(__dirname, './src/test/home.ts'),
  },
}
  • 配置编译产物目录。 修改 webpack 节点下的 output 节点，下面示例中的 path 就是最终生成的编译产物目录（一般不需要修改）：
    js
    output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].js"
},

6. 开发 ​

运行 hummer dev，会在 <工程根目录>/dist 下生成非混淆压缩的编译产物，同时会在本地开启一个 http 服务，此时会生成一个编译产物对应的 URL 链接，如：http://x.x.x.x:8000/index.js，在原生模板工程中通过这个 URL 就可以动态加载 JS 代码了。在 VSCode 中修改源代码并保存，设备上的页面内容就会自动刷新了。同时，还会在浏览器中自动打开这个本地服务页面，可以在这个页面中进行日志查看和视图调试。有关 Hummer CLI 的更多使用，请参考 Hummer CLI 使用教程。

7. 调试 ​

目前 Hummer 提供了三种调试方式：日志调试、代码调试和视图调试。有关调试的详细介绍，请参考 调试 文档。

8. 打包 ​

运行 hummer build，会在 <工程根目录>/dist 下生成混淆压缩后的编译产物，一般用于正式发布阶段。有关 Hummer CLI 的更多使用，请参考 Hummer CLI 使用教程。

9. 发布 ​

把上一步打包生成后的编译产物，上传至你自己的资源发布平台，并配合端上的资源动态加载 SDK 来完成最终编译产物的动态下发和加载，最终触达到用户。