在前端开发中，经常会遇到需要将原始代码转换为可以在浏览器中运行的代码的情况。一种很流行的方式是通过工具如 Babel，Webpack 等来完成这个转换的过程。但是，如果你只是需要将一些原始代码打包成一个单一的 .js 文件并上传到服务器上的话，那么 @ianwalter/dist 应该是一个非常适合你的 npm 包。在本文中，我们将会介绍如何使用该包来实现这个目标。
简介
@ianwalter/dist 是一个可以将原始代码打包成一个包含多个不同类型的 JavaScript 文件（包括 CommonJS、ES module、UMD、IIFE）的 npm 包。与其他工具不同的是，它帮助了开发者在不需要任何配置或脚本的情况下实现这些转换过程。使用这个包非常容易，只需要几个简单的步骤即可。接下来，我们会详细介绍如何使用这个包来完成这些操作。
安装
在开始使用@ianwalter/dist 之前，你需要先安装以下几个必要的工具：
- Node.js 12 或更高版本
- npm 或 Yarn
安装完成后，你可以在你的项目中运行以下命令来安装@ianwalter/dist：
npm install @ianwalter/dist --save
或者
yarn add @ianwalter/dist
配置
使用 @ianwalter/dist 非常简单。你只需要在项目的根目录创建一个 entry.js 文件并编写你的代码即可，例如：
export function hello() { console.log("Hello, world!"); }
然后，你可以使用以下命令将你的代码打包成一个 javascript 文件：
npx @ianwalter/dist entry.js
该命令将会自动地生成以下四个文件到项目的 dist 目录下：
entry.js（UMD 格式）entry.common.js（CommonJS 格式）entry.esm.js（ES module 格式）entry.iife.js（IIFE 格式）
其中，UMD 格式的文件可以直接在浏览器中使用，而 ES module 和 CommonJS 格式的文件则用于在 Node.js 环境下使用。
如果你想要自定义输出文件的名称或目录，或者是指定其他可选的参数，你也可以在 package.json 文件中添加一个 dist 配置项来实现。以下是一个配置示例：
-- -------------------- ---- ------- - ------- ------------- ---------- -------- -------------- --- ---------- - -------- ----- --------- -- ------- - --------- - ------ ---------------- ----------- ----------------------- ------ -------------------- ------- --------------------- ------ ------- -- --------- ----- ------------- ----- ---------- ----- ------ - ----------- ------------ - -- --------------- - ------------------ -------- - -展开代码
然后，在你的项目目录中运行以下命令即可开始打包：
npm run build或者
yarn build可选参数
@ianwalter/dist 还提供了许多可选的参数，可以根据你的需要来配置：
--output.filename
指定输出文件的名称。默认情况下，输出文件的名称与输入文件的名称相同。
$ npx @ianwalter/dist entry.js --output.filename=my-package.js
--output.dir
指定输出文件所在的目录。默认情况下，输出文件被写入当前目录中的 dist 文件夹。
$ npx @ianwalter/dist entry.js --output.dir=build
--minify
开启/关闭 JavaScript 压缩。默认为不压缩。
$ npx @ianwalter/dist entry.js --minify=true
--sourceMaps
生成/不生成 Source Maps。默认为不生成。
$ npx @ianwalter/dist entry.js --sourceMaps=true
--analyze
开启/关闭文件分析器。默认为不开启。
$ npx @ianwalter/dist entry.js --analyze=true
--env
定义环境变量。
$ npx @ianwalter/dist entry.js --env.NODE_ENV=production
--silent
关闭/开启控制台输出。默认为不关闭。
$ npx @ianwalter/dist entry.js --silent=true
总结
在本文中，我们介绍了如何使用 @ianwalter/dist 打包原始代码文件，并生成可以在不同环境中所支持的多个 JavaScript 格式的文件。通过这个包，不需要任何配置或脚本，你就可以轻松地将你的代码打包成一个包含多个不同格式的文件的 JavaScript 库。如果你在开发中遇到类似的问题，不妨试一试这个包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f709760a9b7065299ccbb15
