前言
本文重點介紹如何搭建一個Typescript+Vue的Weex開發(fā)環(huán)境，需要你有一定的Typescript惑惶、Vue、Webpack的開發(fā)經(jīng)驗短纵，如果你不清楚這些带污，可以先看看相關(guān)內(nèi)容：
初始化
示例項目結(jié)構(gòu)
- dist
- src
- page
- example
- example.vue
- index.ts
- types
- vue.d.ts
- weex.d.ts
- package.json
- tsconfig.json
- webpack.config.js
安裝依賴
使用 yarn init 構(gòu)建好 package.json
然后安裝相關(guān)開發(fā)依賴，因Weex項目最終運行環(huán)境為構(gòu)建好的 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的運行環(huán)境鱼冀，無須加載 ，但為了保證代碼上下文的使用連貫（即代碼中依然使用 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 頁面的所有環(huán)境信息 */
config: any
/** 獲取某個 native module 的所有方法 */
requireModule(name: string): any
}
}
declare var weex: we.instance
package.json
配置 dev 腳本 梗脾，在開發(fā)過程中監(jiān)測文件變化并編譯打包為 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寫法的區(qū)別
.vue 文件中的TS代碼段荸型，導出的是Vue的“子類”，導出后就可以直接進行 new 實例化炸茧；而在JS代碼段中瑞妇，導出的則是一個 ComponentOptions<Vue> 接口（套用TS定義來說明）的JSON對象，導出后作為參數(shù)進行 new Vue(JSON) 進行實例化梭冠。關(guān)于這點可以比對上面的代碼辕狰，與官方示例代碼，即可看出區(qū)別
el 參數(shù)問題
官方文檔并沒有對 el 參數(shù)有特別的說明控漠，但經(jīng)個人踩坑發(fā)現(xiàn)該參數(shù)為必須值蔓倍，如果欠缺，運行時則頁面空白
目前已知當 entry 以 .vue 文件為入口時，會自動生成偶翅；除此之外默勾，均須自已指定，基本上可以為任意字符串值倒堕，只要非空就可以了
編譯打包
執(zhí)行以下命令灾测，便會啟動 webpack 監(jiān)測 example/index.ts 為入口的文件變化，并編譯打包到 dist 目錄下
yarn dev
至此垦巴，拿到 dist/example.js 文件媳搪，就可以在 Weex框架下的APP里運行顯示了
進階
每個 bundle js 都是一個Weex實例頁面，可以參考示例項目結(jié)構(gòu)骤宣，在 webpack.config.js 里定義規(guī)則秦爆，遍歷 src/page ，每個目錄就是一個頁面憔披，動態(tài)生成 entry 入口配置
vue-class-component 提供的修飾器功能等限，在編譯打包時，不可避免的會生成部份代碼芬膝，最終在每個 bundle js 里都會重復出現(xiàn)望门。再加上項目可能還有一些公共lib定義，公共組件等锰霜〕镂螅基于這一點，可以考慮定制 JS Framework癣缅，將公用類庫及文件集成進去厨剪，進一步節(jié)省各個 bundle js 的體積
結(jié)尾
文中涉及的多項技術(shù)內(nèi)容，本人并未有深入的研究友存，只因Weex社區(qū)資源實在匱乏祷膳，在查找Typescript開發(fā)Weex相關(guān)資料時，很驚訝的幾乎完全沒有任何信息屡立。為了避免有類似需求的人走彎路直晨，所以將個人研究結(jié)果撰文分享出來，希望能給大家提供幫助侠驯。如若文中有描述錯誤之處抡秆，歡迎指出修正，感激不盡吟策。
