如何使用自动 browserify+uglify 为浏览器提供 node.js 代码

Question

我有一些带有 5 个文件的 node.js 的纯 js 代码：

+--compress.js
+--util
     +--vector.js
     +--map.js
     +--set.js
     +--util.js

然后压缩.js requires set.js 和 util.js，set.js requires map.js 依次 requires vector.js 和 util.js 现在我想从我自己的简单 Web 服务器（快速应用程序）为浏览器提供此代码。我有哪些选择？我是新手，所以我有一些基本的问题，而不是那么基本的问题。如果我想从我的 html 页面中包含 compress.js，我想知道可能的选项。据我了解，我可以修改代码以与 node.js 和浏览器兼容。我用什么来做，require-js？当代码与服务器端和客户端兼容时，如何在 nodejs 中调用它？另一种选择是使用 browserify 并生成可以在客户端使用的 compress.js 版本。

那么，有 uglify-js 可以缩小那个 compress.js 文件（并创建对应的地图文件），对吧？

现在我的目标是保持我的 js 代码不被修改并且可以从浏览器访问。为此，据我所知，我必须编写服务器端代码，自动浏览这些文件（例如，以正确的顺序连接它们）并通过 uglify 传递结果并即时提供结果。根据我的理解，如果我只包含一个文件 compress.js 并尝试在 chrome 中调试该代码，我将在 chrome 调试器中看到，就好像我将所有这些文件原样包含在 chrome 中一样，使用 nodejs 样式的方式来包含依赖项.我是对的，我需要使用哪些工具/库来实现这一目标？

下一步是以这样一种方式缓存即时转换的结果，以便如果我修改任何包含的文件（例如，如果我在实时服务器上编辑它们或完全替换为修改后的版本）所有依赖文件将自动需要重新生成。这可能发生在 compress.js 的下一个 GET 上（例如，在内部，我需要在我的应用程序依赖图中记住并在每个 GET /compress.js 上验证它），或者，我需要添加某种文件系统/操作系统事件当任何文件被更改时，钩子会在我的应用程序中触发一个事件，并且该事件将触发重建我的 compress.js（或任何其他文件）的浏览器化 + uglified 版本。是否有任何现有选项可以在 node.js 中执行类似操作，或者我需要自己实现所有这些（在这种情况下，我应该研究哪些库工具？）

• 看起来像这样产生了我想要的（浏览+带有地图的丑化版本）：https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md

Answer 1

好吧，我会尝试给你一个非常基本的想法。我会创建一个名为“public”的新文件夹。在 public 内部还创建两个文件夹：“assets”和“dist”之类的文件夹。资产将包含未压缩的文件。您可以将 compress.js 放入其中。 Dist 将包含压缩文件。你暂时没有。

现在创建 app.js。 app.js 内部包含http://expressjs.com/ 或http://koajs.com/。我个人使用 koa，因为它是基于 ES6 的。现在在您的应用程序中使用模块来提供静态文件。该模块还将负责缓存。对于 koa，例如 https://github.com/koajs/static。 然后整个应用程序将是

var koa = require('koa');
var app = koa();
var static = require('koa-static');
app.use(static("/path_to_your_project/public/dist"));

app.listen(3000);

现在是最后一块。您将需要 http://gulpjs.com/ 或 http://gruntjs.com/ 将您的 js 资产压缩为缩小版本。还可以使用https://github.com/deepak1556/gulp-browserify 来浏览您的模块。 任务将类似于（非常近似）：

gulp.task('jsassets', function(){
    return gulp.src(['public/assets/*'])
        .pipe(browserify({ insertGlobals : true, debug : !gulp.env.production }))
        .pipe(uglify())
        .pipe(gulp.dest('public/dist'))
});

然后在 dist 中创建 index.html。像往常一样在其中包含您的结果文件 javascript。运行你的 app.js 作为 node app.js 在 localhost:3000 打开的浏览器。应该看到您的代码在浏览器中执行。我没有测试这个，所以调试取决于你。

利润。