最近的一段时间一直在搞TypeScript,一个巨硬出品、赋予JavaScript语言静态类型和编译的语言。
第一个完全使用TypeScript重构的纯Node.js项目已经上线并稳定运行了。
第二个前后端的项目目前也在重构中,关于前端基于webpackTypeScript套路之前也有提到过:TypeScript在react项目中的实践。

最近在公司,需要开发一款智能家居APP,用到MUI框架,首先就是环境搭建,写好的APP页面,怎么跑在模拟器上运行?

一、Cordova创建应用

cordova create oneApp

但是这些做完以后也总感觉缺了点儿什么 (没有尽兴)

我的开发环境:

Cordova创建应用出错

Cordova安装时不能使用cnpm
应该使用npm,cnpm虽然快但是后期出的错绝对比这省下来的时间多得多。

正确安装方法

npm install -g cordova

或

npm install -g cordova --registry=https://registry.npm.taobao.org

npm install -g cordova 报错ENOENT: no such file or directory

原因是之前下载安装失败时,生成了node_modul文件夹,全部删除重新下载安装就ok啦

图片 1
是的,依然有五分之一的JavaScript代码存在于项目中,作为一个TypeScript的示例项目,表现的很不纯粹。
所以有没有可能将这些JavaScript代码也换成TypeScript呢?
答案肯定是有的,首先需要分析这些代码都是什么:

HBuilder版本:9.0.2.201803061935

二、vue创建应用

1、创建一个基于webpack模板的新项目(在上面Cordova项目目录里创建)

$ vue init webpack oneApp(名字可以和上面工程一样)

$ cd oneApp

$ npm install

$ npm run dev

创建完成之后的项目目录

图片 2

2、修改Vue项目config/index.js文件

'use strict'
module.exports = {
  build: {
    index: path.resolve(__dirname, '../../www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsPublicPath: '',
 }
}
  • Webpack打包时的配置文件
  • 一些简单的测试用例(使用的mocha和chai)

逍遥安卓:5.2.2

三、打包编译

1、对Vue工程进行build,编译之后打包生成的代码自动跑到主目录下的WWW文件下
cd 到Vue的MyApp目录下,执行npm run
build

2、对cordova进行各种平台进行编译
cd到 主目录下,执行 cordova build
iOS、cordova build Android等。

ps:自己原来是使用Cordova+Ionic,刚刚开始用Cordova+vue,所以走了很多坑。如果有什么问题欢迎在下面评论。

知道了是哪些地方还在使用JavaScript,这件事儿就变得很好解决了,从构建工具(Webpack)开始,逐个击破,将这些全部替换为TypeScript

逍遥安卓需要开启USB调试模式,一般在模拟器的”设置”那里

Webpack 的 TypeScript 实现版本

在这8102年,很幸福,Webpack官方已经支持了TypeScript编写配置文件,文档地址。
除了TypeScript以外还支持JSXCoffeeScript的解释器,在这就忽略它们的存在了

最早用的是海马玩模拟器,这个模拟器很容易被Hbuilder识别到,但是,启动太慢,而且经常会出问题,之后在网上找到一款逍遥安卓模拟器,我现在感觉还不错,启动很快

依赖的安装

首先是要安装TypeScript相关的一套各种依赖,包括解释器及该语言的核心模块:

npm install -D typescript ts-node

typescript为这个语言的核心模块,ts-node用于直接执行.ts文件,而不需要像tsc那样会编译输出.js文件。

ts-node helloworld.ts

因为要在TypeScript环境下使用Webpack相关的东东,所以要安装对应的types
也就是Webpack所对应的那些*.d.ts,用来告诉TypeScript这是个什么对象,提供什么方法。

npm i -D @types/webpack

一些常用的pLugin都会有对应的@types文件,可以简单的通过npm info @types/XXX来检查是否存在

如果是一些小众的plugin,则可能需要自己创建对应的d.ts文件,例如我们一直在用的qiniu-webpack-plugin,这个就没有对应的@types包的,所以就自己创建一个空文件来告诉TypeScript这是个啥:

declare module 'qiniu-webpack-plugin' // 就一个简单的定义即可

// 如果还有其他的包,直接放到同一个文件就行了
// 文件名也没有要求,保证是 d.ts 结尾即可

放置的位置没有什么限制,随便丢,一般建议放到types文件夹下

最后就是.ts文件在执行时的一些配置文件设置。
用来执行Webpack.ts文件对tsconfig.json有一些小小的要求。
compilerOptions下的target选项必须是es5,这个代表着输出的格式。
以及module要求选择commonjs

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

但一般来讲,执行Webpack的同级目录都已经存在了tsconfig.json,用于实际的前端代码编译,很可能两个配置文件的参数并不一样。
如果因为要使用Webpack去修改真正的代码配置参数肯定是不可取的。
所以我们就会用到这么一个包,用来改变ts-node执行时所依赖的配置文件:tsconfig-paths

Readme中发现了这样的说法:If process.env.TS_NODE_PROJECT is set it will be used to resolved tsconfig.json
Webpack的文档中同样也提到了这句,所以这是一个兼容的方法,在命令运行时指定一个路径,在不影响原有配置的情况下创建一个供Webpack打包时使用的配置。

  1. 将上述的配置文件改名为其它名称,Webpack文档示例中为tsconfig-for-webpack-config.json,这里就直接沿用了
  2. 然后添加npm script如下

{
  "scripts": {
    "build": "TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack --config configs.ts"
  }
}

1,首先打开Bios的vt支持

文件的编写

关于配置文件,从JavaScript切换到TypeScript实际上并不会有太大的改动,因为Webpack的配置文件大多都是写死的文本/常量。
很多类型都是自动生成的,基本可以不用手动指定,一个简单的示例:

import { Configuration } from 'webpack'

const config: Configuration = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
}

export default config

Configuration是一个Webpack定义的接口(interface),用来规范一个对象的行为。
VS Code下按住Command +
单击可以直接跳转到具体的webpack.d.ts定义文件那里,可以看到详细的定义信息。
图片 3
各种常用的规则都写在了这里,使用TypeScript的一个好处就是,当要实现一个功能时你不再需要去网站上查询应该要配置什么,可以直接翻看d.ts的定义。
如果注释写得足够完善,基本可以当成文档来用了,而且在VS Code编辑器中还有动态的提示,以及一些错误的纠正,比如上述的NODE_ENV的获取,如果直接写process.env.NODE_ENV || 'development'是会抛出一个异常的,因为从d.ts中可以看到,关于mode只有三个有效值productiondevelopemntnone,而process.env.NODE_ENV显然只是一个字符串类型的变量。
图片 4
所以我们需要使用三元运算符保证传入的参数一定是我们想要的。

以及在编写的过程中,如果有一些自定义的plugin之类的,可能在使用的过程中会抛异常提示说某个对象不是有效的Plugin对象,一个很简单的方法,在对应的plugin后边添加一个as webpack.Plugin即可。

在这里TypeScript所做的只是静态的检查,并不会对实际的代码执行造成任何影响,就算类型因为强行as而改变,也只是编译期的修改,在实际执行的JavaScript代码中还是弱类型的

在完成了上述的操作后,再执行npm run XXX就可以直接运行TypeScript版本的Webpack配置咯。

可以参考网上,类似的文章:

发表评论

电子邮件地址不会被公开。 必填项已用*标注