带有节点的网站 - 关于 browserify 或 webpack 的几个问题答案

【问题标题】：Website with node - couple of questions about browserify or webpack带有节点的网站 - 关于 browserify 或 webpack 的几个问题
【发布时间】：2017-04-13 21:34:53
【问题描述】：

我正在处理的网站项目需要您的帮助。我的项目包含 7 个 html 文档、3 个样式表、8 个 .js（包括 jquery.min.js 和一些 jquery 插件）和一些图片。我想尽可能多地捆绑和缩小它（最好只获得 1 个 css 和 1 个 js 文件，或者可能是 1 个 js，其中包含内部样式）。

为了清楚起见 - 现在，当我在 html 中拥有所有依赖项时 - 一切正常。但我不确定如何设置所有 module.exports 和 requires。你能告诉我如何以正确的方式一步一步地做吗？

非常感谢。

PS。我用 ES5 编写，所以我不使用 Babel。

【问题讨论】：

标签： javascript html css node.js web

【解决方案1】：

您可以执行以下操作以使您的代码库更加整洁。

手动将相关 js 文件的内容归为一个，并在合并的 js 脚本顶部使用 module.exports = module_name 将其导出为 nodejs 模块（根据需要对项目中的任何 jscript 重复）。
然后将导出的模块包含在您的主节点文件中，并使用var modulesfile = require(./module_name); 包含其主要功能，请在导入您的 js 模块时注意目录路径。
如果需要从 url 多次调用它们，您还可以运行像 minifyjs 这样的压缩程序来使您的 js 文件更小。 minifyjs的nodejs安装和使用可以在here找到。
您还可以使用现有的 css 调用其他 css

@import url("./css/filename.css"); 首先验证正确的css目录路径。

如果您还想对 node 使用 browserify，那么 npm 网站中有一个 full guide。

另一个好的和简单的解决方案是将所有代码库移动到一个 Visual Studio Web 项目中。从那里你可以做任何你想做的事，在捆绑的配置文件等中组织你的脚本和 css 文件（/Scripts 和 /Content 目录）。

注意：您的所有代码都必须迁移到 asp .NET 项目才能正确使用this approach（根据 Microsoft doc）。

【讨论】：