TypeScript从入门到精通（二十五）用Parcel打包TypeScript代码

最新推荐文章于 2022-10-30 14:10:14 发布

哈哈小猿

最新推荐文章于 2022-10-30 14:10:14 发布

阅读量488

点赞数

分类专栏： TS学习教程

本文链接：https://blog.csdn.net/qq_42251357/article/details/121752159

版权

Parcel TypeScript 项目配置预览打包工具

关键词由CSDN通过智能技术生成

TS学习教程专栏收录该内容

25 篇文章 2 订阅

订阅专栏

第二十篇文章中实现了import方式的引入，但是配置起来相当的复杂
使用我们Parcel这个打包工具一切变得简单起来了

新建一个项目

这个步骤在第22篇博客中有详细的提到

新建立一个项目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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./page.ts"></script>
</head>
<body>
    
</body>
</html>

page.ts文件代码：

class Content {
    cname:string = "哈哈小猿"
    returnName():string{
            return this.cname
    }
}
let content = new Content()
console.log(content.returnName());

现在我们并不能正常的预览出效果，我们需要Parcel的帮忙。

Parcel 的安装和使用

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

npm add --dev parcel@next

修改package.json里边的代码。

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

这个意思就是使用parcel对index.html进行一个编译。
然后打开终端输入npm test,这时候终端会给出一个地址http://localhost:1234,把地址放到浏览器上，可以看到浏览器的控制台会输出哈哈小猿。
这说明Parcel会自动对index.html中引入的TypeScript文件进行编译，然后打包好后，就可以直接使用了

哈哈小猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypeScript从入门到精通（二十五）用Parcel打包TypeScript代码

第二十篇文章中实现了import方式的引入，但是配置起来相当的复杂使用我们Parcel这个打包工具一切变得简单起来了新建一个项目这个步骤在第22篇博客中有详细的提到新建立一个项目TSTest,在桌面新建立一个文件夹，然后在VSCode中打开。打开终端，输入npm init -y,创建package.json文件在终端中输入tsc --init,创建tsconfig.json文件修改tsconfig.json配置rootDir和outDir.新建src文件夹，在里边建立index.html,
复制链接

扫一扫