简介
@n3dst4/browser-bundle 是一款可在浏览器中使用的 Node.js 包打包工具。它可以将 Node.js 代码打包为浏览器可用的 JavaScript 文件。
此教程将教你如何使用 @n3dst4/browser-bundle 打包 Node.js 应用程序，并创建适用于浏览器的 JavaScript 包。
步骤一：安装
首先，打开命令行或终端，并使用以下命令安装 @n3dst4/browser-bundle：
npm install @n3dst4/browser-bundle --save-dev
步骤二：配置
在你的项目根目录下创建一个 browserify.config.js 文件，并定义你的项目入口文件、输出文件以及跨域设置。
-- -------------------- ---- -------
-------------- - -
------- ---------------
------- -
----- --------------
------- ------
----- -------
--
----- -----------------------
--inputs：定义你的项目入口文件的路径。output.file：定义你的打包输出文件的路径。output.format：定义你的输出文件格式。目前只支持umd格式。output.name：定义你的输出对象的名称。cors：定义跨域域名列表。
步骤三：打包
在你的项目根目录下，在终端中输入以下命令：
n3dst4-browserify --config browserify.config.js
这会使用 browserify.config.js 文件中定义的配置和入口文件，将你的 Node.js 应用程序打包为一个 JavaScript 文件。
步骤四：使用
将打包后的 bundle.js 文件引入你的 HTML 文件中。
<script src="./bundle.js"></script>
在你的 JavaScript 文件中，你现在可以使用你的包了。
myApp();
示例代码
为了更好地理解使用 @n3dst4/browser-bundle 的过程，以下是一些示例代码。
src/entry.js：
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
module.exports = app;browserify.config.js：
-- -------------------- ---- -------
-------------- - -
------- -------------------
------- -
----- -------------------
------- ------
----- -------
--
----- -----------------------
--打包后的输出结果：
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):(e=e||self).myApp=t()}(this,(function(){return function(){const e=require("express"),t=e();return t.get("/",(e,t)=>{t.send("Hello World!")}),t}}));总结
通过本教程，你现在应该了解如何使用 @n3dst4/browser-bundle 打包 Node.js 应用程序，并使用 JavaScript 包在浏览器中运行它们。虽然 @n3dst4/browser-bundle 的具体配置可能因项目而异，但此教程应该能为你提供足够的指导来开始使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24483c