《TypeScript图形渲染实战:2D架构设计与实现》 —1.5.2 SystemJS直接编译TypeScript源码

举报
华章计算机 发表于 2019/12/11 12:02:13 2019/12/11
【摘要】 本节书摘来自华章计算机《TypeScript图形渲染实战:2D架构设计与实现》 一书中第1章,第1.5.2节,作者是步磊峰。

1.5.2  SystemJS直接编译TypeScript源码

  在index.html中配置SystemJS编译(转译)TS源码,代码如下:

 

<head>

    <meta charset = " utf-8 " />

    <meta http-equiv = " X-UA-Compatible " conten t= " IE = edge ">

    <title> Hello Wrold </title>

    <meta name = " viewport " content = " width = device-width , initial-scale

    = 1 ">

    <link rel = " stylesheet "  type = " text / css " media = " screen " href

     = " main.css "  />

    <script src = "node_modules / systemjs / dist / system.js" > </script>

    <script src= "node_modules / typescript / lib / typescript.js" >

    </script>

    <script>

        System.config ( {

            transpiler : ' typescript ' ,     //使用TypeScript进行编译(转译)

            packages : {

                ' / ' : {

                    defaultExtension : 'ts'   //编译(转译)当前目录(./)下的所有

                                                                             TS文件,如果不设定defaultExtension,

                                                                             则程序无法正确运行

                }

            }

        } ) ;

 

        System

            .import ( './main.ts' )                  //入口文件

            .then ( null , console.error.bind ( console ) );                                                                     //如果出现错误,转发到浏览器的console中显示错误信息

    </script>

</head>

 

<body>

    <canvas id = "canvas" > </canvas>

</body>

 

</html>

 

  设置好SystemJS后,在集成终端中运行npm run dev后,会发现程序顺利地运行起来了。关于SystemJS更多的用法,请参考https://www.npmjs.com/package/systemjs。

  在使用lite-server服务器热部署及SystemJS后:

* 不再需要使用基于客户端的open in browser插件了。

* 不再需要在<script>标签中使用defer关键词。

* 不再需要设置type = "module"了,一切由SystemJS来掌控。

* 不再需要tsconfig.json文件了。

* 不再需要在集成终端中运行tsc命令来自动编译(转译)JS了,仅需要一次性地调用npm run dev命令启动lite-server服务器。

  但是还是建议读者使用tsc --init命令生成tsconfig.json,用于在编码时让VS Code进行严格类型检查,增强代码的健壮性。此时tsconfig.json仅作为类型检测使用,实际并不参与TS的编译(转译)工作。


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。