文档章节

搭建Weex的Typescript开发环境

Zaaksam
 Zaaksam
发布于 2017/11/12 02:44
字数 1065
阅读 650
收藏 5

前言

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

© 著作权归作者所有

共有 人打赏支持
Zaaksam
粉丝 3
博文 2
码字总数 1915
作品 2
深圳
其他
私信 提问
加载中

评论(1)

_Lex
_Lex
👍 牛~~~~·········
初次尝试使用typescript开发react-native

typescript是javascript的超集,在javascript的基础上添加了可选的静态类型,非常适合团队开,这次我们尝试使用typescript来开发react-native应用 搭建react-native开发环境 安装yarn和react...

力谱宿云
2017/02/16
1K
0
TypeScript 语言学习

开发环境推荐 Visual Studio Code https://code.visualstudio.com 免费, 跨平台, 支持 Windows, OS X 以及 Linux. Visual Studio https://www.visualstudio.com Visual Studio 2015 RC 已整合......

小骏骏
2015/08/06
0
0
TypeScript+Webpack开发环境记录

经历过大规模的JS(ES6)的开发,深刻的体验到,JS语言本身的诸多不便利。遂决定转用TypeScript。 本文只是记录一下,当前时间,配置本地webpack、ts、ts-loader开发环境时,需要调整的一些问...

曾建凯
2016/11/09
0
0
我们应该如何(以及为什么)要将Typescript与Express、nodejs一起使用(译文)

在我的职业生涯开始时,我是一名桌面应用开发人员,其中强类型语言占据了市场主导地位。 当我迁移到Web开发时,我对JavaScript和Python等语言的每个新功能都很着迷。事实上,我没有必要声明变...

前端技术小哥
11/19
0
0
xwintop/wxGameRank

项目简介: gitee地址:wxGameRank GitHub地址:wxGameRank wxGameRank是使用Cocos Creator创建的微信小游戏子域排行榜显示示例,此示例中包含好友排行榜列表、群排行榜列表、上传得分、横向...

xwintop
06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

线程安全性--volatile

volatile:当多个线程进行操作共享数据时,可以保证内存中的数据是可见的; @Slf4jpublic class MyVolatile { public static void main(String[] args) { ThreadRun threadRun...

wuyiyi
16分钟前
1
0
大数据入门之hadoop相关概念知识点整理

Hadoop是一个开源框架,允许使用简单的编程模型在跨计算机集群的分布式环境中存储和处理大数据。它的设计是从单个服务器扩展到数千个机器,每个都提供本地计算和存储。今天整理了一些关于had...

技术阿飞
17分钟前
1
0
ssh 免登

ssh-copy-id三步实现SSH无密码登录和ssh常用命令 ssh-copy-id -i .ssh/id_rsa.pub 用户名字@192.168.x.xxx

miaojiangmin
19分钟前
1
0
2018阿里云双12年终大促主会场全攻略

2018阿里云双12年终大促活动已经于12月7日正式开启,从已开放的活动页面来看,活动分为两个阶段: 12月7日-12月23日的拉新返现阶段和12月24日-12月28日的TOP100英雄榜PK阶段。 活动核心亮点:...

阿里云官方博客
20分钟前
1
0
聊聊flink的MemoryStateBackend

序 本文主要研究一下flink的MemoryStateBackend StateBackend flink-runtime_2.11-1.7.0-sources.jar!/org/apache/flink/runtime/state/StateBackend.java @PublicEvolvingpublic interface......

go4it
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部