Как добавить глобальные/общедоступные переменные в grunt-contrib-uglify Выход

Итак, я новичок в Grunt и Node.js. Я создаю сайт и решил, что файл 'main.js' становится слишком большим. Итак, я разделил его, и теперь я пытаюсь использовать Grunt, чтобы объединить все эти JS-файлы.Как добавить глобальные/общедоступные переменные в grunt-contrib-uglify Выход

Проблема, которая у меня есть, заключается в том, что мне нужно сделать некоторые глобальные переменные доступными для всех различных функций во всех этих JS-файлах. Чтобы быть более конкретным, каждая страница на нашем сайте, идентифицируется с помощью id в теге тела:

<body id="home">

Многие из этих JS файлов содержат ли операторы, которые обеспечивают определенные функции запуска, только если загружена соответствующая страница. Например:

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

Обратите внимание: переменная page? Этот парень - тот, который мне нужен, чтобы предоставить доступ ко всем этим файлам (после того, как grunt-contrib-uglify объединяет их вместе). Итак, я решил, что присвою новое «уникальное» имя переменной и сделаю его глобальным.

Я заметил, что grunt-contrib-uglify имеет параметр «wrap», указанный в его документации. Тем не менее, нет примеров того, как его использовать.

Может кто-нибудь сказать мне: - Как использовать опцию «обертку» в «хрюкать-вно-уродовать» - Если это правильный хрюкать плагин для того, что я пытаюсь сделать?

Одна из идей, которые у меня были (в крайнем случае) - создать before.js и after.js и поместить начало и конец (соответственно) того, что я хочу обернуть вокруг других файлов в каждом. Но, я думаю, что опция «wrap» - это то, что мне нужно, да?

UPDATE: Вот ссылка на мой "слиты" JS файл: main.js

И ссылку на мой Gruntfile: Gruntfile.js

источник

2015-04-13 derekmx271

Итак, позвольте мне прояснить это, у вас есть файлы, такие как file1.html file2.html, и все они импортируют ваш (после извлечения) _main.min.js_? И вам нужна ваша переменная 'page', доступная в некотором встроенном javascript внутри ваших html-файлов? – jmartins

Отрицательный, у меня есть серия JS-файлов, которые «объединены» с использованием ** grunt-contrib-concat **. Каждый из этих файлов обернут в свой собственный '$ (document) .ready (function() {});' и (в некоторых случаях) другие события, такие как '$ (window) .load (function() {}); 'и' $ (window) .resize (function() {}); '. Итак, мне нужно (в самом начале объединенного файла) иметь 'page = $ (body) .attr ('id');', а в самом конце «объединенного» файла - ряд функций, которые используются во всех этих различных файлах. Так что-то в самом начале, и что-то в конце. Итак, есть ли опция «** wrap **», что я должен использовать? – derekmx271

Я выполнил поведение, которое я хотел, используя 'src: ['src/js/banner.js', 'src/js/*. Js', 'src/js/functions.js']' где ** banner.js * * содержит мои 'page = $ ('body'). attr ('id');' и ** functions.js ** содержит ряд функций. Но я до сих пор не знаю, как использовать «** wrap **» вариант ** grunt-contrib-uglify **. Это делает то же самое? Если да, то как (и с каким синтаксисом)? – derekmx271

я с той же проблемой испытующе для решения. Но я думаю, что нашел ответ.

Используйте это в gruntfile:

uglify: { 
    options: { 
    wrap: true 
    } 
}

документация для wrap собственности указывает на то, что переменные будут доступны в глобальной переменной, и, глядя на сгенерированный код, который действительно кажется, дело , Передача строкового значения в параметр, похоже, создает глобальную переменную с этим именем.

Однако wrap: true, похоже, делает все объекты и свойства доступными в глобальном масштабе. Таким образом, вместо globals.page.title (который я не могу заставить работать, так или иначе), вы можете просто использовать page.title. Гораздо проще и проще.

Если это соответствует вашим целям, я бы рекомендовал это сделать.

источник

2015-08-20 00:53:03 kocytean

Хорошо, это сложно, я застрял на некоторое время ...

Way вы делаете это с хрюкать-вно-уродовать для фронтэнда JS

создать несколько файлов, таких как

SomeClass.js 
OtherClass.js 
main.js

и использовать некоторые модуль (черновую-файл-зависимости или черновую-вно -concat) и настройте его для согласования ваших файлов. Тогда установка уродовать в вашем Gruntfile.js как

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

В файле (main.js, например) exports переменная должна быть назначена, весь файл может выглядеть следующим образом:

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

exports = otherClassInst;

Теперь то, что это именно делает

Uglify выберет превосходный контекст (this) и определит на нем свойство по имени myPublicObject. Затем он обертывает исходный код функцией и создает здесь экспортную переменную (НЕ ДЕКЛАРУЙТЕvar exportsв любом месте). В конце он назначит то, что вы экспортировали в это свойство. Если вы ничего не назначаете (вы не используете export =), значение inital равно {}, поэтому свойство с void-объектом существует в любом случае.

Чтобы сделать это супер-чистое,

если вы поставите свой код на странице, как <script src="myminifiedfile.min.js"></script>, то выше контекст window => window.myPublicObject является экземпляром OtherClass в то время как window.someClassInst, window.SomeClass и window.OtherClass являются undefined.
это маловероятно, но если вы просто скопируете контент с минимальным результатом и оберните его с помощью другой функции, объект, который вы экспортировали, будет виден только через this["myPublicObject"] => обернуть обертку не делает доступными вещи глобально, это делает их доступными в превосходном контекст.

источник

2017-03-01 23:44:31

Как добавить глобальные/общедоступные переменные в grunt-contrib-uglify Выход

ответ

Смежные вопросы