23. 用 Parcel 打包 TypeScript 代码
在上节代码配置起来非常麻烦,步骤也很多。工作中一定是有更好的解决方案的。其实最通用的有两种解决方案Webpack
和Parcel
。webpack
不用多说,只要是前端基本都会,这几年Parcel
也开始崛起,用的人也越来越多。所以这节就讲一下,如何使用Parcel
来打包TypeScript
代码。
建立一个新项目
这里给出新建项目的步骤,如果你已经熟悉此过程,可以跳过。
- 教学需要,这里我们重新在桌面新建立一个项目
TSTest
文件夹,然后在VSCode
中打开。 - 打开终端,输入
npm init -y
,创建package.json
文件 - 在终端中输入
tsc --init
,创建tsconfig.json
文件 - 修改
tsconfig.json
配置rootDir
和outDir
. - 新建
src
文件夹,在里边建立index.html
,page.ts
文件 - 编写
index.html
文件,并引入page.ts
文件 - 编写
page.ts
文件。
index.html 文件代码:
<!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 = "mybj"; console.log(teacher);
这时候我们并不能正常的预览出效果,我们需要Parcel
的帮忙。
Parcel 的安装和使用
Parcel 可以通过npm
或者yarn
来进行安装,代码如下。
yarn add --dev parcel@next 或 npm install --dev parcel@next
使用 yarn 安装大概需要 1 分钟左右,这些主要看你自身的网络情况。
安装好以后,打开package.json
文件,可以看到这样一段代码,我安装的版本是^2.0.0-beta.1
,如果你学习时和这个版本不一样,操作可能会稍有不同。
修改package.json
里边的代码。
{ "scripts": { "test": "parcel ./src/index.html" }, }
这个意思就是使用parcel
对index.html
进行一个编译。
然后打开终端输入yarn test
,这时候终端会给出一个地址http://localhost:1234
,把地址放到浏览器上,可以看到浏览器的控制台会输出mybj
。
这说明Parcel
会自动对index.html
中引入的TypeScript
文件进行编译,然后打包好后,就可以直接使用了。
使用Parcel
大大简化了我们的配置过程,如果你想详细学习Parcel
可以自行学习,毕竟我们这个是 TypeScript 的教程,所以更多的 Parcel 知识就不作介绍了。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 23. 用 Parcel 打包 TypeScript 代码
码云笔记 » 23. 用 Parcel 打包 TypeScript 代码