使用typescript开发项目,解决文件引用顺序问题

前几天好像看到有人说使用typescript开发项目时编译出来的js文件引用顺序不正确,我今天试了下,可以使用ts的import/export处理这个问题
一、调试
修改tsconfig.json,把module和target都改为ES6,因为es6的语法和ts很像,调试的时候看es6就可以了,索性把sourceMap也关掉
{
"compilerOptions": {
"module": "ES6",
"target": "ES6",
"sourceMap": false
}
}

删除index.html里的jsfile标签,避免laya把src里的其他文件写进来
//删掉
<!--jsfile--startTag-->
<!--jsfile--endTag-->
在index.html里初始化Laya,因为main.js的引用文件会优先执行,所以Laya.init不能写在main.js里面
type="module"是chrome61的新功能,可以使用es6的import来加载模块
<script>
Laya.init(600,400);
</script>
<script type="module" src="js/main.js"></script>
万事具备只欠代码了
但是下面的代码不能直接用ide上的调试按钮调试,因为laya用的是file:///文件协议,无法使用type="module"功能
所以只能用【项目>编译】生成es6代码,然后点开【二维码】,在chrome61+浏览器上输入地址运行
//main.js
import txt from './helloworld.js'
Laya.stage.addChild(txt)

//helloworld.js
var txt = new Laya.Text();
txt.text = "Hello Layabox";
txt.color = "#ffffff";
export default txt
 
二、发布
安装工具,在ide上使用快捷键【ctrl+` 】打开终端,输入下面指令安装打包需要的node.js工具,因为之前已经安装过typescript,所以下面指令就不重复安装了
npm install -g rollup @alexlur/rollup-plugin-typescript rollup-plugin-uglify
在tsconfig.json的同级目录新建rollup配置文件rollup.config.js
//rollup.config.js
import typescript from '@alexlur/rollup-plugin-typescript';
import uglify from 'rollup-plugin-uglify';

export default {
input: './src/main.ts',
output: {
file: './bin/js/main.js',
format: 'iife'
},
plugins: [
typescript(),
uglify()
]
}
在终端输入rollup指令编译代码,把typescript编译成es5并打包成一个文件并压缩
rollup -c
现在已经解决了引用顺序不正确的问题,但是在发布过程中又产生了新的问题:
1、所有代码都合并到了main.js,调试时用的其他js文件要手动删掉
2、发布的main.js已经不是es6,所以还要手动把index.html里的type="module"删掉
3、使用laya发布功能,要把“合并JS文件" "压缩&混淆JS文件" "重新编译项目"这些勾去掉,不然一键回到解放前
 
三、AS3风格
闲着没事就多说两句,typescript有很多as3没有的功能,例如枚举,Promise,async/await,解构等,所以我比较推荐使用typescript开发
习惯了as3的同学可能喜欢一个文件一个类,那么可以这样子写代码
//Main.ts
import HelloWorld from './HelloWorld.js'

Laya.stage.addChild(new HelloWorld)

//HelloWorld.ts
export default class HelloWorld extends Laya.Text {
constructor(){
super()
this.text = "Hello Layabox"
this.color = '#ffffff'
}
}

 
已邀请:

Monica - 知识达人

赞同来自: ymsdandan

下个版本(1.7.13beta)会将ts跟VSCode最新版本同步,到时候可以看下是否还会有这个问题

wudi199553

赞同来自:

感谢反馈

ymsdandan

赞同来自:

非常感谢分享,还有种解决办法就是改变他的index的引用标签也是可以的哟

要回复问题请先

商务合作
商务合作