注意: 这是 Parcel 1 版本的中文文档。如需 Parcel 2 中文文档请进此链接: v2.parceljs.cn

🍰 配方(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文件

帮助我们改善文档

如果有遗漏或者不清楚的地方,请在本站的仓库 提交issue 或者 编辑此页面.