• ? 配方(Recipes)
    • React
    • Preact
    • Vue
    • Typescript
      • 从 index.html 开始编译
      • 直接编译.ts文件
    • 帮助我们改善文档

    ? 配方(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 或者 编辑此页面.