乐趣区

关于前端:Wuzzle进行基于-webpack-的-JS-转译

jiezi

转译器（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 repo wuzzle 点个小 ⭐️，比心。

更多浏览

Wuzzle，不 eject 也能定制 create-react-app 创立的 React 利用

退出移动版