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