文档章节

搭建Weex的Typescript开发环境

Zaaksam
 Zaaksam
发布于 2017/11/12 02:44
字数 1065
阅读 759
收藏 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

Zaaksam

粉丝 4
博文 2
码字总数 1915
作品 2
深圳
其他
私信 提问
加载中

评论(1)

_Lex
_Lex
👍 牛~~~~·········
使用typescript改造koa开发框架

原文地址:使用typescript改造koa开发框架 强类型的 TypeScript 开发体验和维护项目上相比 JavaScript 有着明显的优势,那么对常用的脚手架进行改造也就势在必行了。 接下来开始对基于 koa ...

Jeff.Zhong
02/04
0
0
TypeScript 简明教程:安装 TypeScript

本文为系列文章《TypeScript 简明教程》中的一篇。 认识 TypeScript 安装 TypeScript 前言 通过前一篇文章,相信大家对 TypeScript 有了基本的了解,对 TypeScript 的价值也有了一定的认识。...

Hopsken
2019/03/01
0
0
初次尝试使用typescript开发react-native

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

力谱宿云
2017/02/16
2K
0
从零开始学typescript构建一个rest风格web服务

随着应用的庞大,项目中 javascript 的代码也会越来越臃肿,团队之间的协作也会遇到难题,如果不一直看 api 文档,很难知道团队其他成员写的方法需要什么参数,返回结果又是什么。 解决的方案...

lifefriend_007
2019/01/08
0
0
Visual Studio Code 1.36 发布,结束对 Linux 32 位系统的支持

Visual Studio Code 六月份更新之 1.36 已发布。 先看看有哪些更新亮点: 隐藏/显示状态栏项目 - 在状态栏只展示你选择的项目 优化文件资源管理器中的缩进结构 - 清晰地高亮显示项目的文件夹...

局长
2019/07/05
1.3W
30

没有更多内容

加载失败,请刷新页面

加载更多

java学习记录---强引用、软引用、弱引用、虚引用

1.强引用( StrongReference ) 当内存空间不足,Java虚拟机宁愿抛出OutOfMemoryError错误,使程序异常终止,也不会靠随意回收具有强引用的对象来解决内存不足的问题(无论何时都不会回收) pu...

爸爸受不了
8分钟前
34
0
手把手教你实现一个商品期货计划委托工具

在做商品期货交易时,并非都是全自动的交易策略,有很多半自动的程序化交易工具代替人工盯盘。这类工具虽然算不上完整的策略,但是也是基于使用者的交易意图,有条理的进行交易,也算是一种最...

发明者量化
13分钟前
29
0
Apache Maven 使用POM定义项目结构

官方文档:https://maven.apache.org/guides/introduction/introduction-to-the-pom.html POM简介 一个项目对象模型或POM是Maven中的基本工作单元。它是一个XML文件,包含Maven用于构建项目的...

哼_哼
13分钟前
49
0
低代码开发平台——jabdp简介(一)

jabdp是一款基于引擎模式的web快速开发平台,采用新颖的在线开发部署模式,配置式,低代码,使开发变得更加简单、纯粹,提高了开发的效率。 什么是JABDP? jabdp 全名是JAVA敏捷业务开发平台(...

jabdp
14分钟前
38
0
Docker run tomcat,挂载目录没权限

Docker run tomcat后,出现没权限的问题: java.io.FileNotFoundException: /usr/local/tomcat/logs/host-manager.log (Permission denied) 访问目录ls或ll,均出现: cannot open directory......

xiaoxin
21分钟前
35
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部