Parcel 配方(Recipes)

2020-02-14 17:26 更新

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号