🍰 配方(Recipes)

React

首先需要安装 React 相关的依赖。

博客

  1. npm install --save react
  2. npm install --save react-dom
  3. npm install --save-dev parcel-bundler

或者如果你安装了 Yarn 包管理器

  1. yarn add react
  2. yarn add react-dom
  3. yarn add --dev parcel-bundler

添加 start 指令到 package.json

  1. // package.json
  2. "scripts": {
  3.   "start": "parcel index.html"
  4. }

Preact

首先需要安装 Preact 相关的依赖。

  1. npm install --save preact
  2. npm install --save-dev parcel-bundler

或者如果说你安装了 Yarn 包管理器，作为 npm 的备选

  1. yarn add preact
  2. yarn add --dev parcel-bundler

向 package.json 的 scripts 中添加 start 脚本。

  1. // package.json
  2. "scripts": {
  3.   "start": "parcel index.html"
  4. }

Vue

首先，我们需要安装 Vue 的依赖关系。

  1. npm install --save vue
  2. npm install --save-dev parcel-bundler

或者如果说你安装了 Yarn 包管理器，作为 npm 的备选

  1. yarn add vue
  2. yarn add --dev parcel-bundler

向 package.json 的 scripts 中添加 start 脚本。

  1. // package.json
  2. "scripts": {
  3.   "start": "parcel index.html"
  4. }

Typescript

首先，我们需要添加 Parcel 和 Typescript 到你的项目里。

  1. npm install --save-dev typescript
  2. npm install --save-dev parcel-bundler

或者如果说你安装了 Yarn 包管理器，作为 npm 的备选

  1. yarn add --dev typescript
  2. yarn add --dev parcel-bundler

从 index.html 开始编译

添加 start 脚本到package.json

  1. // package.json
  2. "scripts": {
  3.   "start": "parcel index.html"
  4. }

接着，在你的index.html文件，简单的引入你的.ts文件

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head> </head>
  5.   <body>
  6.     <!-- 这里 👇 -->
  7.     <script src="./myTypescriptFile.ts"></script>
  8.   </body>
  9. </html>

完成！

直接编译.ts文件

添加 start 脚本到package.json

  1. // package.json
  2. "scripts": {
  3.   "start": "parcel myTypescriptFile.ts"
  4. }

完成！😄 在 dist 文件夹中将发现编译后的.js文件

帮助我们改善文档

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