Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
легкость работы с babel.
return gulp
.src('src/**/*.js', {sourcemaps: true})
.pipe(util.plumber())
.pipe(babel({
modules: 'system'
}))
dist в таком AMD-проекте раз плюнуть. Разумеется изменение состава модулей не должно влиять на код сборки.project
|- dist
|- vendor-<random>.js
|- module1-<random>.js
|- module2-<random>.js
|- module3-<random>.js
|- index.html
|- src
|- module1
|- index.js
|- service1.js
|- someDir
|- service2.js
|-module2
|-module3
|- vendor
|- config.js //like requireJs config
|- index.html
gulpfile.js
Webpack еще и gulp, получается, заменяет.
Пруфы?
вместо того чтобы писать код разбираюсь почему опять сломалась сборка
И консолька ОС далеко не так информативна как консолька Хрома.
Jade, polymer
В данный момент (2015-2016) всё это баловство.
все контроллеры и сервисы — классы
я знаю как устроены и генераторы
Ангуляр давно решил эту проблему
Нужно не просто знать, а уметь использовать
Судя по публикациям, народ до сих пор топчется на уровне «делаем приложение на Ангуляре/Реакте/Метеоре за 10 дней»
Можно подробнее, какую именно проблему решил ангуляр и почему там не нужны классы?
var MyClass = function() { ... }
MyClass.ptototype.blabla = blabla
var myClass = new MyClass()
//или в es2015
class MyClass { ... }
Какого рода публикаций вы ждете
Классы в Ангуляре создаются через методы-обертки factory
angular
.module('app')
.factory({
foo: fooFactory,
bar: barFactory,
buz: buzFactory
})
.service('fooBar', FooBar)
;
// среднестатистическая фабрика
function fooFactory (depA, depB) {
return {
foo: foo
}
function foo () { return 'foo'; }
}
// ваш вариант
function barFactory(depA, depB) {
function Bar() {}
Bar.prototype.foo = function () { return 'foo'; };
return Bar;
}
// а если мы захотим рид онли свойства (ну а вдруг? Я лично считаю это дурным тоном но всякое бывает)
function buzFactory(depA, depB) {
var readOnlyVal = 'read only';
function Buz () {}
Object.defineProperties(Buz.prototype, {
buz: { value: buz },
readOnlyVal: { get: function () { return readOnlyVal; } }
});
function buz() { return 'buz'; };
}
// ну и как это у меня
class FooBar {
constructor(depA, depB) {
this.depA = depA;
this.depB = depB;
}
fooBar () {
return 'foobar';
}
get readOnlyVal () {
return readOnlyVal; // ну тип это может быть взятие значений из weakmap например
}
}
Любых, которые бы показывали что люди растут
В большом проекте прекомпилятор добавит столько тормозов и ошибок компиляции
это никак не превозносит Webpack,
Читая комментарии про CommonJS и es2015, создается впечатление, что народ даже со средними проектами не работал. В большом проекте прекомпилятор добавит столько тормозов и ошибок компиляции, что никакой Webpack не спасет.
Это должен делать сборщик и делать это на каждый чих. Изменения на сайте появляются не сразу
source map опять же добавляют лишнюю сложность
Необходимость использования CommonJS модулей на фронтенде и на node.js преувеличена
Максимум библиотечку типа lodash
geometria.ru, vozovoz.ru большие проекты?
Приведите примеры сложных сайтов на Ангуляре.
CommonJS-модули не работают в браузерах т. к. у них нет изолированной области видимости.Открою секрет, они не по-этому в браузере не работают.
Для этого каждый файл нужно обернуть.Browserify делает это автоматически.
Изменения на сайте появляются не сразу, особенно, когда зависимостей много, что раздражает.На больших проектах изменения на сайте появляются только после деплоя из CI-системы.
source map опять же добавляют лишнюю сложностьУжсУжсУжс… какая же все таки сложная штука source map, никогда бы не подумал.
Необходимость использования CommonJS модулей на фронтенде и на node.js преувеличена.Неверно.
gulp.task('js',function(){
gulp.src('./assets/js/*.js')
.pipe(dosomestuff());
});
и дальше перестал читать…gulp.task('js',function(){
return gulp.src('./assets/js/*.js')
.pipe(doSomeStuff());
});
var merge = require('merge-stream');
gulp.task('js',function(){
merged = merge();
[
'mdpi', 'hdpi', 'xhdpi'
].forEach(function(density) {
merged.add(gulp.src('app/images/**/*.@(png|gif|jpeg)')
.pipe(doSomeMagicStuff()))
.pipe(gulp.dest('dist/images/' + density)));
});
return merged;
});
Level Up для новичков: gulp и requirejs