javascript - 带 Node 的网站 - 关于 browserify 或 webpack 的几个问题

标签 javascript html css node.js web

我正在处理的网站元素需要您的帮助。我的元素由 7 个 html 文档、3 个样式表、8 个 .js(包括 jquery.min.js 和一些 jquery 插件)和一些图片组成。我想尽可能地捆绑和缩小它(最好只获得 1 个 css 和 1 个 js 文件,或者可能是 1 个 js,其中包含样式)。

为清楚起见 - 现在,当我在 html 中拥有所有依赖项时 - 一切正常。但我不确定如何设置所有 module.exports 和要求。你能告诉我如何以正确的方式逐步完成吗?

非常感谢。

附言。我用 ES5 编写,所以我不使用 Babel。

最佳答案

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

  • 通过在合并的 js 脚本顶部使用 module.exports = module_name 手动将相关 js 文件的内容组合成一个并将其导出为 nodejs 模块(根据需要对任何 jscripts 重复在你的元素中)。
  • 然后将导出的模块包含在您的主 Node 文件中,并使用 var modulesfile = require(./module_name); 包含它的主要功能,在导入您的 js 模块时请注意目录路径。
  • 如果需要从 url 多次调用 js 文件,您还可以运行 minifyjs 之类的压缩器,使您的 js 文件大小更小。 nodejs安装和minifyjs的使用可以引用here .
  • 您还可以使用
  • 从现有的 css 中调用其他 css

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


如果您还想为 Node 使用 browserify,可以使用 full guide在 npm 网站上。

另一个简单好用的解决方案是将所有代码库移动到 Visual Studio Web 元素中。从那里你可以做你想做的很多事情,在捆绑的配置文件等中组织你的脚本和 css 文件(/Scripts 和/Content 目录)。

注意:您的所有代码都必须迁移到 asp .NET 元素才能使用 this approach (根据 Microsoft 文档)正确。

关于javascript - 带 Node 的网站 - 关于 browserify 或 webpack 的几个问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43391484/

相关文章:

javascript - 带过滤器的 HTML 选择字段

javascript - 将变量传递给 document.getElementById()

html - 有多个表格,需要选择特定行并通过CSS更改背景颜色

javascript - style.display ="block"仅针对默认div 在页面打开时不起作用

css - 仅将我的自定义 CSS 用于我的 WordPress 插件设置页面,如何?

javascript - TensorFlow.js 在浏览器中的速度

javascript - 如何将 id 动态传递到 Bootstrap 验证器规则 : remote for a same form input field? 的 url

css - 如何对不同菜单中的 <ul> <li> 和 <a> 标签应用不同的样式

javascript - 当 JavaScript 动态添加行时,单选按钮功能无法正常工作

php - 如何隐藏类 ="<?php print $example;?>"CSS