我有一些带有 5 个文件的 Node.js 纯 js 代码:
+--compress.js
+--util
+--vector.js
+--map.js
+--set.js
+--util.js
然后 compress.js require
s set.js 和 util.js,set.js require
s map.js,后者又 require
矢量.js 和 util.js
现在我想从我自己的简单网络服务器(express 应用程序)为浏览器提供此代码。我有哪些选择?我是个新人,所以我有一些基本问题,也有一些不太基本的问题。如果我想从我的 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
上验证它),或者,我需要添加某种文件系统/操作系统事件 Hook ,当任何文件发生更改时,该 Hook 会在我的应用程序中触发一个事件,并且该事件将触发重建我的 compress.js (或任何其他文件)的 browserified+uglified 版本。是否有任何现有选项可以在 node.js 中执行类似的操作,或者我需要自己实现所有这些(在这种情况下,我应该研究哪些库工具?)
- 看起来这会产生我想要的内容(带 map 的浏览器化+丑化版本):https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md
最佳答案
好吧,我会尽力向您提供一个非常基本的想法。我将创建一个名为“public”的新文件夹。在 public 内部还创建两个文件夹:类似于“assets”和“dist”。 Assets 将包含未压缩的文件。您可以将 compress.js 放入其中。 Dist 将包含压缩文件。您暂时没有它们。
现在创建app.js。 app.js 内部包括 http://expressjs.com/或http://koajs.com/ 。我个人使用 koa,因为它是基于 ES6 的。现在,在您的应用程序中使用模块来提供静态文件。该模块还将负责缓存。以相思木为例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);
现在是最后一 block 了。您将需要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 打开浏览器。应该会看到您的代码在浏览器中执行。我没有对此进行测试,因此调试取决于您。
利润。
关于javascript - 如何使用自动 browserify+uglify 为浏览器提供 Node.js 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35929247/