1,搭建Parcel工程
Parcel官网:https://v2.parceljs.cn/docs/
npm安装。
npm init -y
npm install --save-dev parcel
准备一个html。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>
启动Parcel。
npx parcel src/index.html
效果:
命令行。
URL地址。
自动检测文件更新。
2,引入TypeScript
主目录新建tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
新建一个TS。
let msg: string = "你好,世界!"
console.log(msg)
新建一个JS。
require("./HelloWorld.ts")
在HTML中引入JS。
<script src="./index.js" type="module"></script>
效果:
3,小总结
HTML是Parcel的入口,可以引入任意的JS。
JS中一旦引入TS,它就会自动编译它。
零配置。