Parcel 配方(Recipes)
配方(Recipes)
React
首先需要安装 React 相关的依赖。
npm install --save react
npm install --save react-dom
npm install --save-dev parcel-bundler或者如果你安装了 Yarn 包管理器
yarn add react
yarn add react-dom
yarn add --dev parcel-bundler添加 start 指令到 package.json
// package.json
"scripts": {
"start": "parcel index.html"
}Preact
首先需要安装 Preact 相关的依赖。
npm install --save preact
npm install --save-dev parcel-bundler或者如果说你安装了 Yarn 包管理器，作为 npm 的备选
yarn add preact
yarn add --dev parcel-bundler向 package.json 的 scripts 中添加 start 脚本。
// package.json
"scripts": {
"start": "parcel index.html"
}Vue
首先，我们需要安装 Vue 的依赖关系。
npm install --save vue
npm install --save-dev parcel-bundler或者如果说你安装了 Yarn 包管理器，作为 npm 的备选
yarn add vue
yarn add --dev parcel-bundler向 package.json 的 scripts 中添加 start 脚本。
// package.json
"scripts": {
"start": "parcel index.html"
}Typescript
首先，我们需要添加 Parcel 和 Typescript 到你的项目里。
npm install --save-dev typescript
npm install --save-dev parcel-bundler或者如果说你安装了 Yarn 包管理器，作为 npm 的备选
yarn add --dev typescript
yarn add --dev parcel-bundler从 index.html 开始编译
添加 start 脚本到package.json
// package.json
"scripts": {
"start": "parcel index.html"
}接着，在你的index.html文件，简单的引入你的.ts文件
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<!-- 这里 ???? -->
<script src="./myTypescriptFile.ts"></script>
</body>
</html>完成！
直接编译.ts文件
添加 start 脚本到package.json
// package.json
"scripts": {
"start": "parcel myTypescriptFile.ts"
}完成！???? 在 dist 文件夹中将发现编译后的.js文件