跳到主要内容

parcel

Parcel是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。通过Parcel构建TypeScript服务

一、初始化项目​

npm init -y

二、安装依赖​

  • parcel-bundler: parcel 打包工具支持浏览器运行 typescript 文件
  • typescript:
npm install typescript parcel-bundler -D

三、配置命令​

  • parcel 启动服务: parcel ./index.html
  • 初始化 typescript.json 配置文件: tsc --init
"scripts": {
  "init:tsc": "tsc --init",
  "dev:parcel": "parcel ./index.html"
},

四、配置 typescript.json 配置文件​

  • 修改outDir配置项
  • 修改rootDir配置项
{
  "compilerOptions": {
    "target": "es2016",                                
    "module": "commonJs",   
    "outDir": "./build",                            
    "rootDir": "./src",                             
    "esModuleInterop": true,                           
    "forceConsistentCasingInFileNames": true,           
    "strict": true,                                      
    "skipLibCheck": true                                
  }
}

五、根据配置项，创建对应文件​

  • 创建根目录/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></title>
      </head>
      <body>
        <script src="./index.ts"></script>
      </body>
    </html>

  • 创建根目录/src/index.ts编写 ts

    interface ListType{
      name:string;
    }
    const list:ListType = {
      name:'哈哈'
    }
    console.log(list);

    五、运行命令，调试 ts​