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

Question

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

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

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

然后，有 uglify-js 可以缩小 compress.js 文件（并创建相应的地图文件），对吗？

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

下一步是以这种方式缓存即时转换的结果，以便如果我修改任何包含的文件（例如，如果我在实时服务器上编辑它们或完全替换为修改后的版本）所有依赖文件将自动需要重新生成。这可能发生在 compress.js 的下一个 GET 上（例如，在内部我需要记住我的应用程序依赖关系图并在每个 GET /compress.js 上验证它）或者，我需要添加某种filesystem/os 事件挂钩，当任何文件发生更改时，它会在我的应用程序中触发一个事件，并且该事件将触发重建浏览器化+丑化版本的 compress.js（或任何其他文件）。在 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/ or http://koajs.com/. I personally use koa, since it is ES6 based. Now in your app use module for serving static files. This module gonna also take care about caching. For koa for example 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/ OR http://gruntjs.com/ to compress your js assets into minified version. Also use 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 作为节点 app.js 在 localhost:3000 打开浏览器。应该看到您的代码在浏览器中执行。我没有测试这个，所以调试由你决定。

利润。

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

how to serve node.js code for browsers with automatic browserify+uglify

javascript

node.js

browserify

uglifyjs

uglifyjs2