quickjs运行typescript?

一、前言

　　quickjs是标准的js引擎，不可能直接运行ts文件。所以需要对ts文件，进行编译，编译成符合当前版本的js脚本，然后在运行。

二、简单ts例子

　　安装typescript，就有tsc编译器。使用npm之类安装。使用 tsc --init 创建项目，此时会得到一个tsconfig.js 配置文件。在src目录创建一个index.ts文件后，就可以写代码了。

　　然后运行 tsc -p tsconfig.json --watch 试试监视src目录，并转为js文件。tsconfig.json 可以配置一下 "outDir": "./build", 根据不同情况，可以配置 "target": "ES5" 或 "target": "ES6", 

　　tsconfig.json

 1 {
 2   "compilerOptions": {
 3     "target": "ES6",
 4     "module": "ES6",
 5     "outDir": "./build",
 6     "esModuleInterop": true,
 7     "forceConsistentCasingInFileNames": true,
 8     "strict": true,
 9     "skipLibCheck": true
10   }
11 }

　　index.ts

1 import { Student } from "./modules"; //这里由于ts默认是没有后缀的，但是编译后，也没有后缀，而quickjs需要根据后缀判断类型，如so、js
2 
3 new Promise((resolve, reject)=>{
4   var student = new Student("张三",18,"北京大学");
5   student.print();
6   resolve(student);
7 }).then((data)=>{
8   console.log(data);
9 });

　　modules.ts

 1 class Person{
 2   name: string;
 3   age: number;
 4   constructor(name:string,age:number){
 5     this.name = name;
 6     this.age = age;
 7   }
 8   print(): void {
 9     console.log(`name:${this.name},age:${this.age}`);
10   }
11 }
12 /**
13  * 学生类
14  */
15 export class Student extends Person{
16   school: string;
17   constructor(name:string,age:number,school:string){
18     super(name,age);
19     this.school = school;
20   }
21   print(): void {
22     super.print();
23     console.log(`school:${this.school}`);
24   }
25 }

　　上面的ts经过实时编译后，会在build目录产生 index.js modules.js 两个文件，通过下面命令行可以直接运行index.js 并打印信息。

1 qjs.exe .\index.js

 　　默认编译成ES5，通过原型链实现类，如果指定--target es6，那么可以直接使用class，同理也可以使用--module es6 方式的模块引用

三、webpack打包

　　如果直接加载源码js，无法做到简洁发布，同时源码容易泄露。因此，用webpack打包成单个bundle库。便于发布管理。先使用npm 安装webpack打包工具 npm install webpack, npm install webpack-cli

1 npm install webpack -g
2 npm install webpack-cli -g
3 npm init -y

　　新建一个webpack.config.js文件，这个是webpack的配置文件。

 1 const path = require('path');
 2 
 3 //webpack配置
 4 module.exports = {
 5   //打包入口
 6   entry: './build/index.js',
 7   output: {
 8     path: path.resolve(__dirname, 'dist'),
 9     filename: 'bundle.js'
10   },
11   // mode: 'development',
12   mode: 'production'
13 }

四、运行

　　qjs.exe .\dist\bundle.js

 1 PS D:\test\ts\code> ..\..\quickjs\qjs.exe .\dist\bundle.js
 2 name:张三,age:18
 3 school:北京大学
 4 [object Object]
 5 QuickJS memory usage -- BigNum 2021-03-27 version, 64-bit, malloc limit: -1
 6 
 7   712 + 0   JSRuntime
 8   488 + 0   JSContext
 9    80 + 0   JSObject
10    40 + 0   JSString
11   136 + 0   JSFunctionBytecode
12 
13 JSObject classes
14 
15 NAME                    COUNT     SIZE
16 memory allocated          412    43419  (105.4 per block)
17 memory used               307    29035  (8 overhead, 46.9 average slack)
18 atoms                     295    22251  (75.4 per atom)

　　后面我们写jsruntime时，需要基于runtime提供的函数，再封装一层，提供合适的库给上层js调用。

本文地址：https://www.cnblogs.com/wunaozai/p/17901660.html

系列目录：https://www.cnblogs.com/wunaozai/p/17853962.html