搭建Weex的Typescript开发环境

原创
2017/11/12 02:44
阅读数 1K

前言

本文重点介绍如何搭建一个Typescript+Vue的Weex开发环境,需要你有一定的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相关资料时,很惊讶的几乎完全没有任何信息。为了避免有类似需求的人走弯路,所以将个人研究结果撰文分享出来,希望能给大家提供帮助。如若文中有描述错误之处,欢迎指出修正,感激不尽。

展开阅读全文
打赏
1
5 收藏
分享
加载中
👍 牛~~~~·········
2018/01/27 16:10
回复
举报
更多评论
打赏
1 评论
5 收藏
1
分享
返回顶部
顶部