npm 包 webtask-compiler 使用教程

1. 简介

webtask-compiler 是一个 npm 包，它可以让你像写正常的 Node.js 应用程序一样来编写 webtask。同时，它还支持 TypeScript 和 Babel 自动编译，从而解决了直接使用 webtask 开发的一些瓶颈问题。

2. 安装

安装 webpack，执行以下命令：

npm install webtask-compiler --save-dev

3. 使用

3.1 TypeScript

如果你想使用 TypeScript 来编写 webtask，你需要在你的项目目录下创建一个 tsconfig.json 文件，它应该长成这样：

-- -------------------- ---- -------
-
    ------------------ -
        --------- --------
        --------- ------
        ------------------- -------
        --------- -----------
        ------ -
            -----
        -
    --
    ---------- -
        ------
    -
-

接下来，在你的 package.json 文件里添加以下脚本：

"scripts": {
    "build": "webtask-compiler --input entry.ts --output out.js --ts",
    "watch": "npm run build -- --watch"
}

• **--input：**输入文件的路径
• **--output：**输出文件的路径
• **--ts：**使用 TypeScript 来编译

现在，你可以在终端中执行 npm run build，它会将你的 TypeScript 文件编译成一个 JavaScript 文件。如果你想持续监听文件变化并重新编译，可以执行 npm run watch。

3.2 Babel

如果你想使用 Babel 来编写 webtask，你需要在你的项目目录下创建一个 .babelrc 文件，它应该长成这样：

{
    "presets": [
        "@babel/preset-env"
    ]
}

接下来，在你的 package.json 文件里添加以下脚本：

"scripts": {
    "build": "webtask-compiler --input entry.js --output out.js --babel",
    "watch": "npm run build -- --watch"
}

• **--input：**输入文件的路径
• **--output：**输出文件的路径
• **--babel：**使用 Babel 来编译

现在，你可以在终端中执行 npm run build，它会将你的 JavaScript 文件编译成一个 JavaScript 文件（不过已经用了 Babel 转译）。如果你想持续监听文件变化并重新编译，可以执行 npm run watch。

4. 示例代码

以下为 TypeScript 示例代码：

import { Context } from 'webtask-tools';

export default function (ctx: Context, req: any, res: any) {
  res.writeHead(200, { 'Content-Type': 'text/plain '});
  res.end('Hello Webtask!');
}

以下为 Babel 示例代码：

import { Context } from 'webtask-tools';

export default function (ctx, req, res) {
  res.writeHead(200, { 'Content-Type': 'text/plain '});
  res.end('Hello Webtask!');
}

5. 结论

如果你是一名前端工程师，并且已经开始使用 webtask 开发你的小应用，那么 webtask-compiler 可以是你的好朋友。无论是 TypeScript 还是 Babel，都可以轻松编译，让你在开发过程中更加快乐！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde9b