生成配置文件
# 生成 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 代码)