用 Parcel 打包 TypeScript 代码

生成配置文件

# 生成 package.json 文件
npm init -y
# 生成 tsconfig.json文件
tsc -init

修改 tsconfig.json 文件里的 rootDir(ts 文件目录)配置项。Parcel 默认编译输出到 dist 文件夹下。

示例代码

在 html 文件中直接引入 ts 文件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./page.ts"></script>
    <title>Document</title>
  </head>
  <body></body>
</html>

page.ts

const teacher: string = "jspang";
console.log(teacher);

Parcel 的安装和使用

Parcel 可以通过 npm 或者 yarn 来进行安装

yarn add --dev parcel@next

安装好以后,打开package.json文件,修改配置项:

{
  "scripts": {
    "test": "parcel ./src/index.html"
  },
}

这个意思就是使用 parcel 对 index.html 进行一个编译。

yarn test

编译成功后会给出一个地址 http://localhost:1234,在浏览器打开即可。


参考:
技术胖——TypeScript从入门到精通(25. 用 Parcel 打包 TypeScript 代码)

上一篇:python – Pycparser评论失败


下一篇:高性能图表控件LightningChart有关闪电图问题解答