前言

本文重点介绍如何搭建一个Typescript+Vue的Weex开发环境，需要你有一定的Typescript、Vue、Webpack的开发经验，如果你不清楚这些，可以先看看相关内容：

• Typescript中文站点
• Vue
• Webpack

初始化

示例项目结构

- dist
- src
  - page
    - example
      - example.vue
      - index.ts
  - types
    - vue.d.ts
    - weex.d.ts
- package.json
- tsconfig.json
- webpack.config.js

安装依赖

使用 yarn init 构建好 package.json

然后安装相关开发依赖，因Weex项目最终运行环境为构建好的 bundle js ，故所有依赖项均放入devDependencies即可

yarn add webpack typescript vue vue-class-component weex-loader ts-loader -D

配置文件

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "es5",
            "es2015"
        ],
        "module": "es2015",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "removeComments": true,
        "suppressImplicitAnyIndexErrors": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "allowJs": true
    },
    "include": [
        "./src/**/*"
    ]
}

webpack.config.js

ts-loader 必须指定 .ts 文件为入口才能工作

Vue对象存在于Weex的运行环境，无须加载 ，但为了保证代码上下文的使用连贯（即代码中依然使用 import Vue from 'vue ），我们可以定义 externals 配置来让 webpack 忽略 vue 包，避免打包到 bundle js 中去

const path = require('path');
const webpack = require('webpack');

var distDir = path.join(__dirname, 'dist');
var pageDir = path.join(__dirname, 'src', 'page')

module.exports = {
    entry: {
        example: [path.join(pageDir, 'example', 'index.ts')]
    },
    output: {
        path: distDir,
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.ts', '.js', '.vue']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /\.vue$/,
                loader: 'weex-loader'
            }
        ]
    },
    externals: {
        vue: 'Vue'
    },
    plugins: [
        new webpack.BannerPlugin({
            banner: '// { "framework": "Vue" } \n',
            raw: true,
            exclude: 'Vue'
        })
    ]
}

src/types/vue.d.ts

让TS代码段可以导入 .vue 文件

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

src/types/weex.d.ts

声明weex实例对象，可自行扩展其他模块

declare namespace we {
    interface instance {
        /** 该变量包含了当前 Weex 页面的所有环境信息 */
        config: any

        /** 获取某个 native module 的所有方法 */
        requireModule(name: string): any
    }
}

declare var weex: we.instance

package.json

配置 dev 脚本 ，在开发过程中监测文件变化并编译打包为 bundle js

"script": {
    "dev": "webpack --config ./webpack.config.js -w"
}

测试运行

示例代码

src/page/example/example.vue

<template>
    <div><text>hello {{info}}</text></div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class Example extends Vue {
  info = "weex";
}
</script>

src/page/example/index.ts

import Example from './example.vue'
new Example({ el: '#root' })

TS写法与JS写法的区别

.vue 文件中的TS代码段，导出的是Vue的“子类”，导出后就可以直接进行 new 实例化；而在JS代码段中，导出的则是一个 ComponentOptions<Vue> 接口（套用TS定义来说明）的JSON对象，导出后作为参数进行 new Vue(JSON) 进行实例化。关于这点可以比对上面的代码，与官方示例代码，即可看出区别

el 参数问题

官方文档并没有对 el 参数有特别的说明，但经个人踩坑发现该参数为必须值，如果欠缺，运行时则页面空白

目前已知当 entry 以 .vue 文件为入口时，会自动生成；除此之外，均须自已指定，基本上可以为任意字符串值，只要非空就可以了

编译打包

执行以下命令，便会启动 webpack 监测 example/index.ts 为入口的文件变化，并编译打包到 dist 目录下

yarn dev

至此，拿到 dist/example.js 文件，就可以在 Weex框架下的APP里运行显示了

进阶

每个 bundle js 都是一个Weex实例页面，可以参考示例项目结构，在 webpack.config.js 里定义规则，遍历 src/page ，每个目录就是一个页面，动态生成 entry 入口配置

vue-class-component 提供的修饰器功能，在编译打包时，不可避免的会生成部份代码，最终在每个 bundle js 里都会重复出现。再加上项目可能还有一些公共lib定义，公共组件等。基于这一点，可以考虑定制 JS Framework，将公用类库及文件集成进去，进一步节省各个 bundle js 的体积

结尾

文中涉及的多项技术内容，本人并未有深入的研究，只因Weex社区资源实在匮乏，在查找Typescript开发Weex相关资料时，很惊讶的几乎完全没有任何信息。为了避免有类似需求的人走弯路，所以将个人研究结果撰文分享出来，希望能给大家提供帮助。如若文中有描述错误之处，欢迎指出修正，感激不尽。