本篇文章将介绍如何使用parcel工具打包TS代码。
安装parcel
工具包到devDependencies
。
# Yarn
yarn global add parcel-bundler
# npm/cnpm
npm install parcel-bundler -g
编写TypeScript代码。
const teacher: string = 'jake'
console.log(teacher)
在index.html
中直接引入写好的TypeScript
文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./demo7.ts"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
在package.json
中配置parcel
指令。
"test": "parcel ./src/index.html"
直接运行npm run test
,然后查看html源码,引入的ts文件被编译成了js文件。
使用parcel
工具的好处:
- 减少潜在的webpack配置项
- 会自动将html中引入的ts文件编译成浏览器能够运行的代码
- 启动一个本地服务器,将本地编译的代码返回给我们
- 实际看到的就是经过ts编译后的,可以直接运行的html文件