typescript学习系列6:使用parcle打包Typescript代码1.parcel安装以及使用: 1.创建项目

1.`parcel`安装以及使用:

1.创建项目：

新建文件夹myParcel

执行npm init -y
继续执行tsc --init
myParcel文件夹下新建src文件夹，然后修改tsconfig.json文件

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                    
     "outDir": "./dist",                        /* Redirect output structure to the directory. */
     "rootDir": "./src",                       /* Specify the root directory of input 
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking 
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between 

  }
}

src目录下创建index.html和page.ts内容如下:

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用parcel打包ts文件</title>
</head>
<body>
  <script src="./page.ts"></script>
</body>
</html>

//page.ts
const NBA2001MVP:string = "阿伦.艾佛森";
console.log(NBA2001MVP);

2.安装`parcel`:

直接运行index.html,查看控制台是没办法直接看到打印的结果，需要编译

npm install parcel@next -D来安装parcel

来到package.json中

//package.json
{
  "name": "Myparcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "parcel ./src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.0.0-rc.0"
  }
}

"test": "parcel ./src/index.html":在执行npm run test 的时候,parcel会编译index.html文件,从而使index.html中引入的page.ts文件

运行npm run test 后，控制台看到结果：

typescript学习系列6:使用parcle打包Typescript代码

1.parcel安装以及使用:

1.创建项目：

2.安装parcel:

1.`parcel`安装以及使用:

2.安装`parcel`: