使用 npm 包 wzrd 构建前端项目

简介

wzrd 是一个基于浏览器的 JavaScript 模块打包工具。它能够将你写的代码打包成浏览器可用的 JavaScript 文件，实现类似 webpack 的功能。不同之处在于，wzrd 只需要通过简单的命令即可实现打包，无需繁琐的配置。

安装和使用

安装 wzrd 很简单：

npm install -g wzrd

安装完成后，我们可以通过以下命令来运行 wzrd：

wzrd <your-entry-file.js>

这样就会启动一个本地服务，并把你的入口文件编译成一个 bundle.js 文件。接着，你只需在浏览器里访问 http://localhost:9966/ 即可看到你的页面。

除了传入 entry file 之外，wzrd 还支持一些参数：

• -p, --port: 指定服务监听的端口号（默认为 9966）
• -d, --debug: 在控制台输出调试信息
• -u, --uglify: 压缩生成的 JavaScript 代码
• -t, --transform: 添加额外的 Babel 转换

例如，如果我们希望监听 8080 端口并压缩输出文件，可以这样运行：

wzrd <your-entry-file.js> -p 8080 -u

示例代码

下面是一个简单的示例代码，演示如何使用 wzrd 打包两个模块：

// index.js
import { hello } from './hello.js';
import { world } from './world.js';

console.log(hello() + ' ' + world());

// hello.js
export function hello() {
  return 'Hello';
}

// world.js
export function world() {
  return 'World';
}

通过运行 wzrd index.js，我们就能把这几个文件打包成一个 bundle.js 文件，并在浏览器里看到输出结果。

总结

使用 wzrd 能够快速地构建前端项目，无需复杂的配置即可实现打包。它非常适合用于小型项目和样例代码的编写。当然，如果你需要更多功能，像代码分离、多入口文件等，还是推荐使用其他更为成熟的打包工具，例如 webpack。

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