[]使用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'

    }

}