23. 用 Parcel 打包 TypeScript 代码

在上节代码配置起来非常麻烦,步骤也很多。工作中一定是有更好的解决方案的。其实最通用的有两种解决方案WebpackParcelwebpack不用多说,只要是前端基本都会,这几年Parcel也开始崛起,用的人也越来越多。所以这节就讲一下,如何使用Parcel来打包TypeScript代码。

建立一个新项目

这里给出新建项目的步骤,如果你已经熟悉此过程,可以跳过。

  1. 教学需要,这里我们重新在桌面新建立一个项目TSTest文件夹,然后在VSCode中打开。
  2. 打开终端,输入npm init -y,创建package.json文件
  3. 在终端中输入tsc --init,创建tsconfig.json文件
  4. 修改tsconfig.json配置rootDiroutDir.
  5. 新建src文件夹,在里边建立index.html,page.ts文件
  6. 编写index.html文件,并引入page.ts文件
  7. 编写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 [email protected]
或
npm install --dev [email protected]

使用 yarn 安装大概需要 1 分钟左右,这些主要看你自身的网络情况。

安装好以后,打开package.json文件,可以看到这样一段代码,我安装的版本是^2.0.0-beta.1,如果你学习时和这个版本不一样,操作可能会稍有不同。

修改package.json里边的代码。

{

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

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

然后打开终端输入yarn test,这时候终端会给出一个地址http://localhost:1234,把地址放到浏览器上,可以看到浏览器的控制台会输出mybj

这说明Parcel会自动对index.html中引入的TypeScript文件进行编译,然后打包好后,就可以直接使用了。

使用Parcel大大简化了我们的配置过程,如果你想详细学习Parcel可以自行学习,毕竟我们这个是 TypeScript 的教程,所以更多的 Parcel 知识就不作介绍了。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 23. 用 Parcel 打包 TypeScript 代码

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们