Wuzzle,进行基于 webpack 的 JS 转译

更新日期: 2022-08-18阅读: 1.1k标签: webpack

转译器(transpiler)是指能够进行文件到文件一对一转换的编译器(compiler)。在 JS 世界中,常见的开箱即可用的转译器有typescript cli、babel cli 等,但他们一般只处理 .js 、 .ts 等脚本文件。而 webpack 尽管能通过配置处理各种文件,但他更关注如何打包 JS,做文件一对一转换相当麻烦。

为了解决这些局限,wuzzle 作为配置 webpack 编译的补充者,提供了基于 webpack 封装的 JS 转译命令 wuzzle transpile ,以下是具体用法。

使用 wuzzle transpile 转译 .ts 文件

首先,我们看下 wuzzle transpile 对 .ts 文件的转译。初始化一个空目录 demo ,并安装 wuzzle:

$ mkdir demo
# ...
$ cd demo
# ...
$ npm init -y
# ...
$ npm i -D wuzzle

在 src/server.ts 准备一份简易服务器代码,并安装所需依赖:

import express from 'express';

const port = process.env.PORT ?? '5000';

const app = express();

app.get('/', (req, res) => {
  res.send('<!DOCTYPE html><html><head></head><body>Hello, wuzzle!</body></html>');
});

app.listen(port, () => console.log(`Started on port ${port}.`));
$ npm i -S express
# ...
$ npm i -D @types/express

默认情况下 wuzzle transpile 的转译行为等同于零配置的 webpack,几乎不做任何事情,需要安装 webpack 处理 .ts 文件所需依赖并进行配置。

因此,安装 typescript 、 ts-loader ,借助 tsc --init 创建 tsconfig.json :

$ npm i -D "ts-loader@^7.0.5" "typescript@~4.6.0"
# ...
$ npx tsc --init
Created a new tsconfig.json with: # ...

然后,在 package.json 旁创建文件 wuzzle.config.js 配置 wuzzle transpile :

module.exports = (webpackConfig) => {
  webpackConfig.module = {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
    ],
  };
  webpackConfig.resolve = {
    extensions: ['.ts', '.js', '.json'],
  };
};

同时,方便起见,在 package.json 写入启动脚本和构建脚本:

"scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node dist/server",
+    "build": "wuzzle transpile \"src/**/*\" -d dist"
  },

现在,执行 build 脚本,就可以通过 wuzzle transpile 将 .ts 文件转译成 .js 文件了:

$ npm run build
Start compiling 'src/**/*.ts'.
File 'src/server.ts' compiled.
All files compiled.

转译完成之后,通过 start 脚本,就可以启动这个服务器了,访问 http://localhost:5000 ,就可以看到运行效果了:

$ npm start
# ...
Started on port 5000.

使用 wuzzle transpile 转译图片文件

接下来我们再看下 wuzzle transpile 对其他文件的转译,比如图片。其实这和转译 .ts 文件类似,都是把输入文件按照指定配置转换成 .js 文件,不同的只是输入文件是图片。

这里,使用 url-loader 处理图片,安装一下依赖:

$ npm i -D url-loader

调整 wuzzle.config.js :

webpackConfig.module = {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
+      {
+        test: /\.jpg$/,
+        loader: 'url-loader',
+      },
    ],
  };

然后,放入图片 src/logo.jpg ,并在 src/server.ts 引用:

import express from 'express';
+import logo from './logo.jpg';

...

app.get('/', (req, res) => {
-  res.send(`<!DOCTYPE html><html><head></head><body>Hello, wuzzle!</body></html>`);
+  res.send(`<!DOCTYPE html><html><head></head><body><img src="${logo}" /></body></html>`);
});

为了 TS 类型检查能够正确识别图片文件,创建文件 src/modules.d.ts :

declare module '*.jpg' {
  const o: string;
  export default o;
}

现在,关闭正在运行的 npm start 、重新执行 npm run build 、 npm start 、刷新 http://localhost:5000 ,就可以看到转译图片文件并引用的运行效果了。

优化与调试

不难发现, dist 目录下的构建产物存在两个小问题:1 是大小没有压缩过,2 是没有生成 source map。这可以在 package.json 的构建脚本中添加参数 -p 和 -s 进行优化:

"scripts": {
    ...
-    "build": "wuzzle transpile \"src/**/*\" -d dist"
+    "build": "wuzzle transpile \"src/**/*\" -d dist -p -s"
  }

另外,还有个开发体验上的小问题,每次修改 src 下的文件要重新手动的构建和启动。这可以结合参数 -w 和 nodemon 来解决。

先在 package.json 写入 watch 脚本:

"scripts": {
    ...
+    "watch": "wuzzle transpile \"src/**/*\" -d dist -w -s"
  },

watch 脚本会进行一次完整的构建后监视 src/**/* 以重新构建变化的文件。其中,参数 -s 用于生成 source map。

之后,安装 nodemon 以及另一个辅助命令行工具 concurrently 并在 package.json 写入 dev 脚本:

$ npm i -D nodemon concurrently
"scripts": {
    ...
+    "dev": "concurrently \"npm:watch\" \"nodemon dist/server -d 2 -w dist\""
  }

dev 脚本会并行执行 watch 脚本和 nodemon 命令,当 src 目录下有文件变化时 dist 目录下对应文件就会被重新构建,而这就会让服务器重新启动。这样,在调试时就可以用 dev 脚本获得一个更好的开发体验了。

什么时候用 wuzzle transpile

如果要转译的输入文件主要是 .js 、 .ts 等脚本文件,typescript cli、babel cli 也许就够用了。但如果遇到像示例中的那样要转译图片或者其他非脚本类文件的情况, wuzzle transpile 会是个很不错的选择。

典型的场景比如做 SSR(服务端渲染)的时候,浏览器端已经配置好了 webpack 打包,服务端就可以复用同一个配置通过 wuzzle transpile 做 JS 转译,让浏览器端代码被无缝的引用到服务端。同时,相比于在服务端复用同一个配置直接进行 webpack 打包,这能够保留构建前后的目录结构,让服务端开发保持简单。

有兴趣深入的话,wuzzle 官方示例 e2e/.../react-scripts 提供了结合使用 CRA 和 wuzzle 搭建的真实应用,其中, src/server 目录实现了 SSR 可以参考。

写在最后

目前,文章中的示例工程已经收录在了wuzzle-blog/.../demo,读者朋友可以按需打开参考,有任何疑问或想法,欢迎留言。此外,如果对 wuzzle 有任何疑问或想法,欢迎在wuzzle/issues 新建 issue,中英文都可以。如果有兴趣和时间贡献代码,欢迎提交 PR,具体可以参考开发引导。最后,如果觉得小工具有帮助,可以在 GitHub repowuzzle 点个小 :star:️,比心。

链接: https://fly63.com/article/detial/12022

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

一步一步webpack,webpack的学习入门

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

优化Webpack构建性能的几点建议

Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!