Question

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

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

然后压缩.js require的set.js和util.js，set.js require的map.js反过来require的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上（例如内部我需要记住我的app依赖图并在每个GET /compress.js上验证它），或者，我需要添加一些一种文件系统/ os事件挂钩，当任何文件被更改时会触发我的应用程序中的事件，并且该事件将触发我的compress.js（或任何其他文件）的重建浏览器+ uglified版本。是否有任何现有选项可以在node.js中执行类似的操作，或者我需要自己实现所有这些选项（在这种情况下，我应该查看哪些libs工具？）

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

Answer 1

我会尽力给你一个非常基本的想法。我会创建一个名为“public”的新文件夹。公共内部还创建了两个文件夹：类似“资产”和“dist”。资产将包含未压缩的文件。你会把compress.js放进去。 Dist将包含压缩文件。你现在没有它们。

现在创建app.js.内部app.js包括http://expressjs.com/或http://koajs.com/。我个人使用koa，因为它是基于ES6的。现在在你的app中使用模块来提供静态文件。这个模块也会关注缓存。对于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对模块进行broser化。任务将类似于（非常近似）：

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。像往常一样将结果文件包含在那里。将app.js作为节点app.js运行在localhost：3000上打开浏览器。应该看到你的代码在浏览器中执行Ididnt测试这个，所以调试取决于你。

利润。

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

1 个答案: