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

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "./build",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

　　index.ts

import { Student } from "./modules"; //这里由于ts默认是没有后缀的，但是编译后，也没有后缀，而quickjs需要根据后缀判断类型，如so、js

new Promise((resolve, reject)=>{
  var student = new Student("张三",18,"北京大学");
  student.print();
  resolve(student);
}).then((data)=>{
  console.log(data);
});

　　modules.ts

class Person{
  name: string;
  age: number;
  constructor(name:string,age:number){
    this.name = name;
    this.age = age;
  }
  print(): void {
    console.log(`name:${this.name},age:${this.age}`);
  }
}
/**
 * 学生类
 */
export class Student extends Person{
  school: string;
  constructor(name:string,age:number,school:string){
    super(name,age);
    this.school = school;
  }
  print(): void {
    super.print();
    console.log(`school:${this.school}`);
  }
}

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

qjs.exe .\index.js

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

 

三、webpack打包

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

npm install webpack -g
npm install webpack-cli -g
npm init -y

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

const path = require('path');

//webpack配置
module.exports = {
  //打包入口
  entry: './build/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // mode: 'development',
  mode: 'production'
}

 　　编译命令直接就输入  webpack

 

四、esbuild打包

　　跟上面的webpack打包类似，但是esbuild仅仅是一个JavaScript的打包器，而webpack更像是一个打包工具链，可以加载不同的loader，实现不同资源文件的打包。

　　打包命令

esbuild ./src --bundle --outfile=dist_esbuild/bundle.js --minify

　　可以直接编译打包ts文件，不需要编译build目录。当然，如果在webpack.config.js配置不同的loader后也可以实现类似的效果。本文略 。

 

五、运行

　　qjs.exe .\dist\bundle.js

PS D:\test\ts\code> ..\..\quickjs\qjs.exe .\dist\bundle.js
name:张三,age:18
school:北京大学
[object Object]
QuickJS memory usage -- BigNum 2021-03-27 version, 64-bit, malloc limit: -1

  712 + 0   JSRuntime
  488 + 0   JSContext
   80 + 0   JSObject
   40 + 0   JSString
  136 + 0   JSFunctionBytecode

JSObject classes

NAME                    COUNT     SIZE
memory allocated          412    43419  (105.4 per block)
memory used               307    29035  (8 overhead, 46.9 average slack)
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