2

好的，所以我对 Grunt 和 Node.js 很陌生。我正在构建一个站点，并认为“main.js”文件变得太大了。因此，我将其拆分，现在我尝试使用 Grunt 将所有这些 JS 文件重新组合在一起。

我遇到的问题是我需要为所有这些 JS 文件中的所有各种函数提供一些全局变量。更具体地说，我们网站上的每个页面都通过idin body 标记进行标识：

<body id="home">

这些 JS 文件中的许多都包含 if 语句，以确保某些函数仅在加载了相应的页面时才运行。例如：

if (page == 'home') {
    var title = "Home Page"
    $('.page-title').text(title);
}

注意到page变量了吗？那个人是我需要让所有这些文件都可用的那个人（在 grunt-contrib-uglify 将它们合并在一起之后）。所以，我想我会分配一个新的“唯一”变量名，并使其成为全局变量。

我注意到grunt-contrib-uglify在其文档中列出了一个 ' wrap ' 选项。但是，没有给出如何使用它的示例。

谁能告诉我：-如何在“grunt-contrib-uglify”中使用“wrap”选项-如果这是我想要做的正确的 grunt 插件？

我的一个想法（作为最后的手段）是创建一个before.jsandafter.js并放置我希望在每个文件中包含其他文件的开头和结尾（分别）。但是，我认为“包装”选项是我需要的，是吗？

更新：这是我的“合并”JS文件的链接： main.js

还有一个指向我的 Gruntfile 的链接： Gruntfile.js

4

2 回答 2

0

我一直在寻找解决方案时遇到同样的问题。但我想我找到了答案。

在你的 gruntfile 中使用它：

uglify: {
  options: {
    wrap: true
  }
}

该wrap属性的文档表明这些变量将在全局变量中可用，并查看生成的代码似乎确实如此。将字符串值传递给参数似乎确实会创建一个具有该名称的全局变量。

但是，wrap: true似乎使所有对象和属性在全局范围内都可用。因此globals.page.title，您可以使用page.title. 简单得多，简单得多。

如果这适合您的目的，我建议您改为这样做。

于 2015-08-20T00:53:03.800 回答
0

Ok this one is tricky, I have been stucked for a while...

Way you do this with grunt-contrib-uglify for frontend JS

create multiple files like

SomeClass.js
OtherClass.js
main.js

and use some module (grunt-file-dependencies or grunt-contrib-concat) and setup it to concat your files. Then setup uglify in your Gruntfile.js like 

...
uglify: {
    options: {
        wrap: "myPublicObject",
        ...
    },

In file (main.js for example) exports variable has to be assigned, the entire file might look like this:

var otherClassInst = new OtherClass();
var someClassInst = new SomeClass();

exports = otherClassInst;

Now what it exactly does

Uglify will pick superior context (this) and define property on it named myPublicObject. Then it wrap your sourcecode with function and create exports variable here (DO NOT DECLARE var exports anywhere). At the end it will assign what you exported to that property. If you dont assign anything (you dont use exports =) inital value is {}, so the property with void object exists anyway.

To make this super-clear,

  1. if you put your code into page like <script src="myminifiedfile.min.js"></script>, then superior context is window => window.myPublicObject is instance of OtherClass while window.someClassInst, window.SomeClass and window.OtherClass are undefined.
  2. this is unlikely, but if you just copy content of minified result and wrap it with different function, object you exported will be visible only via this["myPublicObject"] => uglify wrap doesn't make things globaly accessible, it makes them accessible in superior context.
于 2017-03-01T23:44:31.650 回答