TypeScript 实战 - 用Parcel打包TypeScript代码

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

新建一个项目

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

1、新建立一个项目TSTest,在桌面新建立一个文件夹，然后在VSCode中打开；
2、打开终端，输入npminit-y,创建package.json文件；
3、在终端中输入tsc--init,创建tsconfig.json文件；
4、修改tsconfig.json配置rootDir和outDir.；
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 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文件进行编译，然后打包好后，就可以直接使用了

25、TypeScript 实战 - 用Parcel打包TypeScript代码

新建一个项目

Parcel 的安装和使用