Просмотр полной версии : 6to5 modules
Пытаюсь настроить WebStorm (PhpStorm) для работы с модулями.
Настроил file watcher 6to5, он кстати подхватывает jsx 12.0 по умолчанию.
Никак не могу понять как сделать сборку проекта, если использовать common модули.
строение проекта такое(src: es6, build: es5):
src
|-- class.js
|-- module.js
build
|-- src
|-- class.js
|-- module.js
src/module.js:
import c from './src/class.js'
let d = c(10, 20);
build/src/module.js:
"use strict";
var _interopRequire = function (obj) {
return obj && (obj["default"] || obj);
};
var c = _interopRequire(require("./src/class.js"));
var d = c(10, 20);
Как собрать проект, чтобы он запустился в браузере?
Я предполагал, что нужно использовать webpack, но не допирает что делать дальше.
kobezzza
18.01.2015, 20:05
WebPack не юзал, но https://www.npmjs.com/package/browserify также решит твою проблему.
kobezzza,
Можно ответить по подробней? С учетом: Пытаюсь настроить WebStorm (PhpStorm) для работы с модулями. потому, что ссылка на схожий ресурс мне никак не помогает.
Как собрать проект, чтобы он запустился в браузере?
6to5 - переводчик кода. модули он не собирает. это значит, что нужно использовать сборщик модулей.
Я предполагал, что нужно использовать webpack, но не допирает что делать дальше.
теперь нужно собрать модули в один файл (бандл)
как вариант,
WebPack не юзал, но https://www.npmjs.com/package/browserify также решит твою проблему.
но я адепт вебпака и расскажу на его примере.
у тебя немного неверный синтаксис модулей был, я подправил.
быстрый старт: https://yadi.sk/d/OH-fUfEye5KZG (можно не скачивать, просто посмотреть)
Я решил вложить webpack в grunt, дабы использовать его не из консоли, а из IDE.
Путь воина:
1. установить nodejs, убедиться, что его видно в консоли (`node --version`)
2. установить команду grunt через `npm install --global grunt-cli`
3. в папке проекта выполнить `npm install` (скачает зависимости. они определены как "для разработки" в package.json). я хз, может IDE это сделает
4. через IDE можно вызывать таски Grunt
таск webpack:start работает, webpack:watch - не тестил, но должен работать
файл настройки webpack я сделал отдельным файлом, хотя можно и было уместить в Gruntfile. при использовании его с командной строки webpack по умолчанию подхватывает конфигурацию из файла с именем webpack.config.js
далее прошу проследовать в доки вебпака: http://webpack.github.io/docs/. там же и про сжатие\sourcemap\инкрементальн ю сборку\алиасы путей\сервер разработки с livereload\другое
если есть вопросы - вы знаете, где меня искать
melky,
Спасибо тебе добрый человек. То, что нужно.
melky, вопрос к доброму человеку :) , а также всем, кто располагает какой-либо инфой: чем отличаются requirejs, browserify & webpack друг от друга?
Имеется такая (http://www.slant.co/topics/1089/compare/~browserify_vs_requirejs_vs_webpack) ссылка. Есть что добавить?)
melky, вопрос к доброму человеку , а также всем, кто располагает какой-либо инфой: чем отличаются requirejs, browserify & webpack друг от друга?
хм... свежестью :) RJS был первый, потом browserify, потом webpack.
я б рекомендовал попробовать всё. серьёзно, берёшь готовую маленькую приложуху (напр. ToDo App) и распихиваешь по модулям в соответствии со сборщиком
по моим ощущениям:
- RequireJS. я впервые увидел вообще программу для модулей. затра*ался править конфиг и читать мануалы. (кривая обучения!). было жалко, что собирает только JS.
- browserify. неплохо, неплохая общественность, хорошая скорость. немного магическая настройка (кривая обучения), но если разобраться, то неплохо
- webpack http://i.imgur.com/9cIUH1Z.png
минусы webpack - отсутствие полной документации (на самом деле, не важно), слабое коммьюнити (только начал раскручиваться)
Имеется такая ссылка. Есть что добавить?)
я б добавил минус всё. ужасная инфа :) не читай, закрой :)
requirejs - отметается автоматически. это только AMD (асинхронные модули) и это нерасширяемо; и вообще, устарело. хотя стоит отдать должное - RJS породил новую моду, за что я уважаю этот проект.
насчёт других
вкратце - практически всё, что есть в browserify, есть и в webpack.
но далеко не всё, что есть в webpack, так же есть в browserify.
чего нет в webpack от browserify? настройки сборки через файл package.json . но вместо него используется файл JS, который исполняется (!) и экспортирует объект - имхо, это мощнее.
рекомендую прочесть срач интеллектуальную беседу от создателя browserify (https://gist.github.com/substack/68f8d502be42d5cd4942) (это же substack написал сей инструмент, или меня под ночь плющит от курсача?)
имхо, топовая фишка webpack - встроенный Web сервер для разработки (!) на Express со встроенным Hot Module Replace (прокаченный LiveReload), а так же плагин для горячего обновления кода для React (http://vimeo.com/100010922) (очень помогает при вёрстке проекта)
melky, я пока ничего из этого плотно не юзал, поэтому такие вопросы :)
1. Правильно при использовании webpack, сервер может работать на любом языке, но, для сборки нужна нода?
2. Вопрос любителям es6 и, в частности, 6to5: табличка гласит (http://kangax.github.io/compat-table/es6/), что extends
class A extends B {}
не поддерживается. Это правда? Такая печаль)))
1. Правильно при использовании webpack, сервер может работать на любом языке, но, для сборки нужна нода?
да. эта программа написана на nodejs
2. Вопрос любителям es6 и, в частности, 6to5: табличка гласит, что extends
class A extends B {}
не поддерживается. Это правда? Такая печаль)))
https://6to5.org/docs/tour/#classes
я хз тут - до 6to5 пока руки не дошли
nerv_,
2. Вопрос любителям es6 и, в частности, 6to5: табличка гласит, что class A extends B {}
не поддерживается. Это правда?
*вкатился в тред*
Не верь ей, это очень хреновая табличка. Усё в 6to5 поддерживается, верь мне.
Такая печаль)))
>>печаль
>>)))
Да?)
melky,
я хз тут - до 6to5 пока руки не дошли
совсем со своими реактами и флаксами заигрался, шо аж про es6 забыл!
*вкатился в тред*
they see me rollin )
melky,
совсем со своими реактами и флаксами заигрался, шо аж про es6 забыл!
не, у меня сессия и курсач
но игрался я docker'ом, fig'ом и vagrant'ом :blink: LEGO!
не, у меня сессия и курсач
Как я тебя понимаю, с чем самый большой головняк?)
Как я тебя понимаю, с чем самый большой головняк?)
с курсачём. потому что его нужно было сдать до Н.Г. (так в приказе написано) :lol:
с курсачём. потому что его нужно было сдать до Н.Г. (так в приказе написано)
_
Ыыы, та да. Это один из + Украинских универов)
Тут написано (http://es6rocks.com/2014/10/es6-modules-today-with-6to5/), что эта штука поддерживает es6 модули.
Вопрос нафига тогда requirejs, browserify & webpack? :)
kobezzza
19.01.2015, 12:35
Тут написано (http://es6rocks.com/2014/10/es6-modules-today-with-6to5/), что эта штука поддерживает es6 модули.
Вопрос нафига тогда requirejs, browserify & webpack? :)
6to5 поддерживает синтаксис модулей и умеет транслировать его в CJS, AMD и UMD, но для сборки файлов в один (если такое нужно) нужно юзать отдельный инструмент.
Тут написано, что эта штука поддерживает es6 модули.
Вопрос нафига тогда requirejs, browserify & webpack?
В первом посте этого топика даже есть пример, что именно ты имеешь в es6 и что ты получишь в es5 (build/src/module.js)
По умолчанию 6to5 транслирует в common модули(что лично я считаю оптимальным), но ты можешь настроить в любые другие, даже свои придумать.
в остальном ответил kobezzza
melky, что-то я не пойму, как мне в конфиге вебпака прописать опцию entry. Согласно доке, данный параметр либо строка, либо хеш. А у меня в файловой структуре такой замес https://yadi.sk/i/ODUHnMnTe8Efc где вложенность произвольная
melky, что-то я не пойму, как мне в конфиге вебпака прописать опцию entry. Согласно доке, данный параметр либо строка, либо хеш. А у меня в файловой структуре такой замес https://yadi.sk/i/ODUHnMnTe8Efc где вложенность произвольная
ты хочешь указать angular, jquery sugarjs и другое как entry ? я не понял \ сплю
melky, я пытаюсь понять, как это работает :D
Мне от него нужен bundle, насколько я понимаю, чтобы юзать в браузере. Как его получить?
Я понимаю так, что мне нужно указать все файлы, которые будут в пакете (bundle) и это указывается в хэше entry.
Или я заблуждаюсь?
melky, я пытаюсь понять, как это работает :D
Мне от него нужен bundle, насколько я понимаю, чтобы юзать в браузере. Как его получить?
Я понимаю так, что мне нужно указать все файлы, которые будут в пакете (bundle) и это указывается в хэше entry.
Или я заблуждаюсь?
entry - входная точка
ниже - дерево модулей
http://referatdb.ru/pars_docs/refs/6/5189/5189_html_5e22aace.jpg
кружок - начало; входная точка, т.е. entry
параллелограммы - модули вызываются внутри entry файла ( вызов - это require('jquery') )
трапеции - модули цепляются из "параллелограммов"
как работает ? хм... ну он парсит указанные entry файлы на предмет вызова модулей, а затем рекурсивно парсит вызываемые модули на предмет вызова модулей :)
melky, ну, пока он ничего не парсит, а шлет меня на х*й в течении последних двух часов :D
https://yadi.sk/i/BP-I6HNAe8GTJ
Чувствую, что буду пробовать browserify)))
melky, ну, пока он ничего не парсит, а шлет меня на х*й в течении последних двух часов :D
https://yadi.sk/i/BP-I6HNAe8GTJ
попробуй указать относительный путь к entry (т.е. относительно файла webpack.config.js)
конкретно в твоем случае это "./httpdocs/js/project.js" (вроде бы)
P.S. непрошенный совет resolve.extensions лучше не правь - это для advanced юзеров ) на скрине вижу, ты забыл про index.js (пустая строка). см доку (http://webpack.github.io/docs/configuration.html#resolve-extensions)
Чувствую, что буду пробовать browserify)))
перебежчик :)
опробуй указать относительный путь к entry (т.е. относительно файла webpack.config.js)
у меня весь конфиг в грант-файле
конкретно в твоем случае это "./httpdocs/js/project.js" (вроде бы)
сделал. Уперся в
ERROR in Entry module not found: Error: Cannot resolve module 'script' in %PATH%
Теперь конфиг имеет вид
var path = require('path');
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-webpack');
grunt.initConfig({
// Read configuration from package.json
pkg: grunt.file.readJSON('package.json'),
// webpack
webpack: {
// common
options: {
entry: './httpdocs/js/project.js',
output: {
//path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: 'script'}
]
}
},
start: {
}
}
});
grunt.registerTask('default', ['webpack:start']);
};
P.S. непрошенный совет resolve.extensions
удалил
перебежчик
не, я был бы им, если использовал веб-пак. Мне его даже запустить не удалось)
module: {
loaders: [
{test: /\.js$/, loader: 'script'}
]
}
У меня:
module: {
loaders: [
{test: /\.js$/, loader: '6to5'}
]
}
6to5 это сборщик, у тебя какой-то script <- это у тебя сборщик такой?
из package.json:
"devDependencies": {
"6to5": "^2.13.1",
"6to5-loader": "^2.0.0",
"grunt": "^0.4.5",
"grunt-webpack": "^1.0.8",
"webpack": "^1.5.1",
"webpack-dev-server": "^1.7.0"
}
Gozar, ага, я тоже на это думал. Но, поскольку в данный момент я запускаю веб-пак без необходимости конвертации из es6 в es5, то, как я думал, в моем случае загрузчик должен быть другим (обычным).
Закомментил
//{test: /\.js$/, loader: '6to5'}
сборка завершилась успешно :dance:
Спасибо :)
Отложил в сторону webpack, поставил browserify, собрал bundle.js.
Мне просто нужен глобальный синхронный (на первое время) require. Насколько я понимаю, require доступен только внутри bundle. Как его вытащить наружу и возможно ли это?
<script src="/js/bootstrap.js"></script>
<script>
<!-- тут ошибка require is undefined -->
require('/js/native/plugins/core.js');
</script>
Спасибо.
ERROR in Entry module not found: Error: Cannot resolve module 'script' in %PATH%
`script-loader` установлен?
Gozar, уже в теме :)Gozar, ага, я тоже на это думал. Но, поскольку в данный момент я запускаю веб-пак без необходимости конвертации из es6 в es5, то, как я думал, в моем случае загрузчик должен быть другим (обычным).
тогда можно его вообще вырубить (загрузчик на js файлы)Мне просто нужен глобальный синхронный (на первое время) require. Насколько я понимаю, require доступен только внутри bundle. Как его вытащить наружу и возможно ли это?
шото странное ты делаешь :)
Gozar, уже в теме
:)
nerv_,
Не спеши, разложи в голове по полочкам.
шото странное ты делаешь
в рамках веб-пака
у меня файл следующего вида
// POLYFILLS
require('./polyfills/console-sham.min.js');
// NATIVE
require('./native/plugins/core.js');
require('./native/plugins/object-traverse.min.js');
require('./native/plugins/object-to-formdata.min.js');
// JQUERY
require('./jquery/jquery-1.8.3.min.js');
// JQUERY PLUGINS
require('./jquery/plugins/jquery.ui.touch-punch-0.2.2.min.js');
require('./jquery/plugins/jquery.chosen-1.1.0.min.js');
//require('./jquery/plugins/bootstrap-datepicker.js');
// ANGULAR
require('./angular/angular-1.2.18.min.js');
// ANGULAR MODULES
require('./angular/modules/angular-touch-1.2.9.min.js');
который после сборки превращается в один js файл (bundle), в который напиханы все require файлы. Именно полностью код включен. Я ожидал, что файлы будут подтягиваться с сервера. Такое возможно? Не горю желанием каждый раз пересобирать bundle.
Даже если я это автоматизирую, есть другие разрабы, кот. про node.js и grunt не слышали вообще, а работать с проектом им придется.
За день использования веб-пака ценности я в нем не увидел. В чем она? Собирать проекта в один файл? grunt-concat это умеет. Где подгрузка модулей с сервера? Я взял его именно за этим. Их есть у вас?
Где подгрузка модулей с сервера?
Мой загрузчик именно это и делал, тянул с сервера tpl, css, js. В итоге сейчас я хочу webpack и сборку на клиенте. Напиши его сам если хочешь. Не нравится webpack, ну дык никто не застявляет, ты же сам на browserify...
есть другие разрабы, кот. про node.js и grunt не слышали вообще, а работать с проектом им придется.
Ты уверен, что они смогут писать код, если даже не знают про ноду и грунт?
За день использования веб-пака ценности я в нем не увидел. В чем она? Собирать проекта в один файл? grunt-concat это умеет
а грунт конкат умеет писать на es6 с синтаксисом модулей es6 и затем запускать проект в браузере?
Берем файл кладем на сервер, он работает, кладем в проект браузера и он работает, разве не круто?
который после сборки превращается в один js файл (bundle), в который напиханы все require файлы. Именно полностью код включен. Я ожидал, что файлы будут подтягиваться с сервера.
зачем тебе модули тогда вообще?
Не горю желанием каждый раз пересобирать bundle.
концептуально глянь - как тогда переводить код из других языков в JS, причем на лету? а source map?
некуда не убежишь от пересборки. но этот процесс можно облегчить - используя инкрементальную сборку (watch и cache в конфиге), а так же вывод файлов в оперативную память (а не на диск) - это уже webpack-dev-server
Даже если я это автоматизирую, есть другие разрабы, кот. про node.js и grunt не слышали вообще, а работать с проектом им придется.
не понял, о чём ты здесь. README.md для слабаков?
За день использования веб-пака ценности я в нем не увидел. В чем она? Собирать проекта в один файл? grunt-concat это умеет. Где подгрузка модулей с сервера? Я взял его именно за этим. Их есть у вас?
убирай тогда нафиг предобработку скриптов (сборщик т.е.)
подзагрузка модулей есть у require js - походу, его функционал тебе и нужен
такого функционала вряд ли найдешь, потому что он ... не используется
Gozar, melky, всем спасибо :)
зачем тебе модули тогда вообще?
что значит зачем? Чтобы не гадить в глобал
концептуально глянь - как тогда переводить код из других языков в JS, причем на лету? а source map?
а зачем мне налету переводить? Переводить я могу через терминал по мере необходимости. Речь идет о том, что часть кода (es6) буду переводить я, а часть будет писаться на es6/es3 (уже не мной).
некуда не убежишь от пересборки
разумеется. Просто мне хотелось бы, чтобы "модули" грузились с сервера. А уж как и чем они будут собираться - дело десятое. Я вчера подумал, видимо, буду начинать с requirejs. А к тому времени, как плотно его поюзаю, глядишь нативный import/export появится.
не понял, о чём ты здесь. README.md для слабаков?
там чуваки гитом пользуются постольку-поскольку :)
убирай тогда нафиг предобработку скриптов (сборщик т.е.)
подзагрузка модулей есть у require js - походу, его функционал тебе и нужен
ага, так и поступлю. Единственное что: я читал, что веб-пак это тоже умеет и пытался от него этого добиться на случай, если в недалеком будущем мне все-таки понадобится предварительная сборка. В доке и гугле не нашел примеров на этот счет. За рамками предобработчика
require is not defined
Тобишь AMD.
Берем файл кладем на сервер, он работает, кладем в проект браузера и он работает, разве не круто?
конечно, круто :)
Мой загрузчик именно это и делал, тянул с сервера tpl, css, js. В итоге сейчас я хочу webpack и сборку на клиенте.
любопытно, почему?
любопытно, почему?
Наверное потому, что неудобно тянуть сотни файлов с сервера, вместо одного сжатого.
Gozar, melky, всем спасибо :)
стараюсь вразумить - причиняю добро. :) трудно принять новое, конечно (сам тупил и отступал, но пересилил... и получил плюхи)
что значит зачем? Чтобы не гадить в глобал
не срать в глобал - правильно.
даже namespace в глобале - это уже "насрал". модули работают без namespace.
модули не оставляют после себя ничего, если ты прямо это не укажешь.
а зачем мне налету переводить? Переводить я могу через терминал по мере необходимости. Речь идет о том, что часть кода (es6) буду переводить я, а часть будет писаться на es6/es3 (уже не мной).
на лету переводить - простая формальность; абстракция от языка, на котором написан твой код (я про source map)
если будешь переводить на диск, то тут будет адский тормоз в вводе\выводе (IO), вне зависимости от HDD\SSD. чем меньше "шестерёнок в механизме", тем быстрее он работает.
разумеется. Просто мне хотелось бы, чтобы "модули" грузились с сервера. А уж как и чем они будут собираться - дело десятое. Я вчера подумал, видимо, буду начинать с requirejs. А к тому времени, как плотно его поюзаю, глядишь нативный import/export появится.
угумс, надо дозреть :) не хай webpack зазря. я вангую - через месяц-два сам ах*евать будешь от того, что он могёт.
я ж типа джуниор сам... (наверное) и нихрена не знаю :cray: - говорю, что сам выучил
там чуваки гитом пользуются постольку-поскольку :)
йоу! в моей "большой деревне" такая же проблема... но я не сдаюсь :)
я читал, что веб-пак это тоже умеет и пытался от него этого добиться на случай, если в недалеком будущем мне все-таки понадобится предварительная сборка. В доке и гугле не нашел примеров на этот счет. За рамками предобработчик
в вебпаке есть предзагрузка "по требованию" (bundle-loader), но от предобработки всёравно не отделаешься
любопытно, почему?
см внизу.
Наверное потому, что неудобно тянуть сотни файлов с сервера, вместо одного сжатого.
думаю, что - нет. я думаю, что - велосипед.
а если велосипед сделали до тебя; и причём, его поддерживают?
принять новое - трудно (особенно если оно чужое), но, иногда, овчинка стоит выделки.
закон сохранения энергии в силе!!! люди тратят энергию на разработку инструмента, а ты тратишь её на изучение инструмента.
что проще - делать с нуля, или изучить готовое?
P.S. материаловед сдал сессию на степуху - я пьяный. сильно в почки не пинайте :nono:
melky,
я ж типа джуниор сам... (наверное) и нихрена не знаю - говорю, что сам выучил
Опять издеваешься?)
melky,
Опять издеваешься?)
заниженная самооценка. это то, что заставляет меня двигаться вперёд... крутит мои шестерёнки, так сказать :)
http://www.quickmeme.com/img/56/5689790087b31842cfc6b2b9f3e3b0ef60b691f99970c2f1ca cb1cdc77bb0900.jpg
заниженная самооценка. это то, что заставляет меня двигаться вперёд
+1;)
melky,
cyber,
что делать, если даже занижение самооценки не помогает?)
melky,
cyber,
что делать, если даже занижение самооценки не помогает?)
выкинуть прокрастинацию в окно )
серьёзно, это такая одновременно жёсткая и мягкая вещь, что пока не плюнешь и начнёшь работать, её не снесёшь
для меня работает фраза "ну ща, хотя бы 10 мин посижу а потом вижно будет". ну как вы поняли, например на курсаче, 10 минут превратились в 4 дня))) вот и вся прокрастинация - тупая стенка в голове, мешающая начать
я сегодня прям капитан очевидность)
что делать, если даже занижение самооценки не помогает?)
Мне помогает понимание того что я тупой, серьезно, я в школе не фига не учил математику и сейчас вышка для меня это 9 кругов ада, осознания того что я тупой помогает мне завставлять себя учить по 5-6 часов в день и я в общем прекрасно понимаю что 80% того что я сейчас учу мне нафиг будет не нужно, но математика реально учит думать, ну еще не много крыша от нее едит (но от моей девушки тоже крыша иногда едит, но я же ее не бросаю ) .
П.с плюс у меня есть цели которых я хочу достичь.
для меня работает фраза "ну ща, хотя бы 10 мин посижу а потом вижно будет". ну как вы поняли, например на курсаче, 10 минут превратились в 4 дня))) вот и вся прокрастинация - тупая стенка в голове, мешающая начать
Есть такое)
Safort, или что бы заставлять себя бегать и заниматся спортом, я думаю что я толстый, в реальности я понимаю что вес 75 кг, при росте 185-190 ( я хз какой у меня рост:D) это норма. Но если бы я так не думал то хрен бы я себе заставил бегать по 10 км :)
в реальности я понимаю что вес 75 кг, при росте 185-190 ( я хз какой у меня рост) это норма. Но если бы я так не думал то хрен бы я себе заставил бегать по 10 км
у меня 75 кг при росте 180 и я жру как конь... но вся энергия от еды уходит в голову (спасибо, программирование), так что исправлять вес нужно другими способами, думаю))
melky,
выкинуть прокрастинацию в окно )
серьёзно, это такая одновременно жёсткая и мягкая вещь, что пока не плюнешь и начнёшь работать, её не снесёшь
Я это всё понимаю, но иногда не срабатывает)
я сегодня прям капитан очевидность)
Капитан Мелкий! :D
у меня 75 кг при росте 180 и я жру как конь... но вся энергия от еды уходит в голову (спасибо, программирование), так что исправлять вес нужно другими способами, думаю))
От организма зависит, мой сосед жрет 24/7, особо не напргяается и не толстеет:D
melky,
для меня работает фраза "ну ща, хотя бы 10 мин посижу а потом вижно будет".
Лол! Эта же фраза запускает мою прокрастинацию) Но после длительной прокрастинации наступает обратный эффект.
cyber,
Мне помогает понимание того что я тупой
Не помогает( Я постараюсь использовать "ну ща, хотя бы 10 мин посижу.." для проггинга, думаю, что это должно сработать. Но это всё завтра, а пока...
Не помогает( Я постараюсь использовать "ну ща, хотя бы 10 мин посижу.." для проггинга, думаю, что это должно сработать. Но это всё завтра, а пока...
Хорошо помогает каой то deadline , например сессия на которой не купишь зачет )
cyber,
От организма зависит, мой сосед жрет 24/7, особо не напргяается и не толстеет
На самом деле не только. Просто мозг очень прожорливая штука, особенно прожорлив во время решения сложных задач.
На самом деле не только. Просто мозг очень прожорливая штука, особенно прожорлив во время решения сложных задач.
Знаю, но худой != умный :D
75 кг при росте 180 это норма, а вот 90 и выше перебор.
Я сейчас на диету сел (не из-за излишнего веса). Можно кушать только картошечку, марковочку и кашу. Мозг забирает 40% энергии, приходиться в день жрать по кастрюле картошки или ведру каши. Чувствую себя машиной по переработке комбикорма в гуано.
Жду советы как растолстеть с картошки и марковки :)
Я сейчас на диету сел (не из-за излишнего веса).
Ща пол страны на диете с текущим курсом доллара :)
Я сейчас на диету сел (
Я тоже, у меня нет времени готовить, я замутил кастрюлю гречки (или другой каши ), и ем её на завтрак и ужин, а в обед какой то суп
Ща пол страны на диете с текущим курсом доллара
Для меня курс доллара это такие цифры, которые ни на что не влияют.
Да, мне повезло, мне можно есть только то, что можно бедным и совсем ничего нельзя, что можно богатым. Не жизнь, а сказка. Как ни странно, но жить ещё немного хочется :)
Потребовалось подключить некоторые плагины к веб-паку, в т.ч. uglifyjs plugin (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin). Никак не найду, где дока к этому плагину? (список опций)
Потребовалось подключить некоторые плагины к веб-паку, в т.ч. uglifyjs plugin (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin). Никак не найду, где дока к этому плагину? (список опций)
Minimize all JavaScript output of chunks. Loaders are switched into minimizing mode. You can pass an object containing UglifyJs options.
ну а настройки углифи смотри на странице углифи:
https://github.com/mishoo/UglifyJS2#readme
Возник еще ряд вопросов по webpack:
1. генерируются "source-map" в режиме
devtool: 'source-map'
При отладке браузере, в конец модуля вижу
/** WEBPACK FOOTER **
** тут полный путь к файлу на диске
**/
Можно ли как-нибудь удалить эту строчку? Или, на крайний случай, заменить на какую-либо другую?
2. при использовании в режиме "watch"
watch: true,
keepalive: true
столкнулся с проблемой: сборка стартует только после потери форуса штормом. В целом, это удобно, но для моего случая не подходит, т.к. для просмотра изменений, мне необходимо зааплодить файлы на удаленный сервер, что также происходит автоматически по событию потери форуса и настраивается напрямую в шторме. Т.о. приходится два раза переключаться между браузером и IDE. При первой потере фокусе стартует сборка, при второй аплоад файлов.
Можно ли настроить вотчер веб-пака, чтобы он срабатывал по таймауту, а не по потере фокуса? Насколько я понимаю, таймаут (http://webpack.github.io/docs/configuration.html#watchdelay) в вебпаке есть, но он не срабатывает :(
При отладке браузере, в конец модуля вижу
походу нет
Где применяется футер:
https://github.com/webpack/webpack/blob/a979874cd05fd4dc8a500b3d4c3ad322c4db729a/lib/EvalSourceMapDevToolModuleTemplatePlugin.js#L47
Сам модуль вывода футера:
https://github.com/webpack/webpack/blob/37a518e77cea8dc43bfc8f10bd7a39f19460ddb3/lib/ModuleFilenameHelpers.js#L78
столкнулся с проблемой: сборка стартует только после потери форуса штормом. В целом, это удобно, но для моего случая не подходит, т.к. для просмотра изменений, мне необходимо зааплодить файлы на удаленный сервер, что также происходит автоматически по событию потери форуса и настраивается напрямую в шторме. Т.о. приходится два раза переключаться между браузером и IDE. При первой потере фокусе стартует сборка, при второй аплоад файлов.
Можно ли настроить вотчер веб-пака, чтобы он срабатывал по таймауту, а не по потере фокуса? Насколько я понимаю, таймаут в вебпаке есть, но он не срабатывает
не понял) запишешь скринкаст?
как будет выглядеть импорт модуля на ES6?
var React = require('react/addons');
var cx = React.addons.classSet;
var PureRenderMixin = require('react').addons.PureRenderMixin;
var Fluxxor = require('fluxxor');
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
var Router = require('react-router');
var State = Router.State;
var Navigation = Router.Navigation;
подозреваю, что некоторые будут так:
import React from 'react/addons'
// cx ???
// PureRenderMixin ???
import Fluxxor, {StoreWatchMixin} from 'fluxxor'
// FluxMixin ???
import Router, {State, Navigation} from 'react-router'
интересуют конкретно импорты, без var\let. хотя с ними будет вот так:
import React from 'react/addons'
let cx = React.addons.classSet
let PureRenderMixin = React.addons.PureRenderMixin
import Fluxxor, {StoreWatchMixin} from 'fluxxor'
let FluxMixin = Fluxxor.FluxMixin(React)
import Router, {State, Navigation} from 'react-router'
Что за фигня, не фига не пойму. Юзаю gulp-webpack
gulp.task ( "webpack", function ( ) {
return gulp.src('dist/*.js')
.pipe(webpack( {} ))
.pipe(gulp.dest('dist/'));
} );
gulp.task('default', [ "webpack" ] , function() {});
Но получаю хрень
ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' /home/cyber_ua/Dropbox/Projects/cropperJS/dist/crop.js in /home/cyber_ua/Dropbox/Projects/cropperJS
@ multi main
Что за бред почему оно ищет в деректории выше?
Это правильный путь
/home/cyber_ua/Dropbox/Projects/cropperJS/dist/crop.js
cyber, совсем не понял, что ты делаешь и что хочешь получить на выходе
melky, У меня есть gulp + gulp-webpack + babel
Хочу что сначало код привело к es5 через babel, а потом собрались модули которые подключены через require
melky, У меня есть gulp + gulp-webpack + babel
Хочу что сначало код привело к es5 через babel, а потом собрались модули которые подключены через require
хм.. можешь скинуть пример файла и конфиг?
Вот
gulp.task( "babel", function ( ) {
return gulp.src( "src/*.js" )
.pipe( babel() )
.pipe( gulp.dest("dist/") )
.pipe(webpack( {} ));
});
gulp.task( 'watch', function() {
gulp.watch( "src/*.js", [ "babel", "webpack" ] );
});
gulp.task ( "webpack", function ( ) {
return gulp.src('dist/*.js')
.pipe(webpack( {} ))
.pipe(gulp.dest('dist/'));
} );
gulp.task('default', [ "watch", "babel", "webpack" ] , function() {});
Вот
gulp.task( "babel", function ( ) {
return gulp.src( "src/*.js" )
.pipe( babel() )
.pipe( gulp.dest("dist/") )
.pipe(webpack( {} ));
});
gulp.task( 'watch', function() {
gulp.watch( "src/*.js", [ "babel", "webpack" ] );
});
gulp.task ( "webpack", function ( ) {
return gulp.src('dist/*.js')
.pipe(webpack( {} ))
.pipe(gulp.dest('dist/'));
} );
gulp.task('default', [ "watch", "babel", "webpack" ] , function() {});
entry должен быть один. babel должен быть внутри webpack
http://webpack.github.io/docs/usage-with-gulp.html
https://github.com/babel/babel-loader
Не спеши, разложи в голове по полочкам.
времени на тот момент не было :)
melky, заработало только так
gulp.task( 'build', function() {
return gulp.src( "src/*.js" )
.pipe( babel() )
.pipe( gulp.dest("dist/") )
.pipe(webpack( {
module: {
//babel: [
// { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
//]
}} ))
.pipe( gulp.dest("dist/") );
});
Если прописать модуль то не пашит..
Кто нибудь использовал Array.from с бабел-трансляцией? Он у меня не хочет преобразовывать в ES5.
Так и не должно. Для этого полифилл (http://babeljs.io/docs/usage/polyfill/) подключается.
Erolast,
я его подрубал прописывая require("babel/polyfill");
в коде, но не сработало.
melky, заработало только так
gulp.task( 'build', function() {
return gulp.src( "src/*.js" )
.pipe( babel() )
.pipe( gulp.dest("dist/") )
.pipe(webpack( {
module: {
//babel: [
// { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
//]
}} ))
.pipe( gulp.dest("dist/") );
});
Если прописать модуль то не пашит..
:( а что пишет то?
melky, короче ошибка парсинга как код в es6 и сначала должен выполнится babel, если так сделать
pipe(webpack( {
module: {
babel: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
]
}} ))
cyber, уверен, что пишешь правильно? Для webpack'а такой синтаксис:
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
}
http://babeljs.io/docs/using-babel/#webpack
nerv_, Это я туплю, все работает.
Я хочу что бы модули подключал webpack, а babel занимался только трансляцией es5 to es6
так и будет
а если я хочу CommonJS стайл?)
правда, непонятно зачем... Пиши CommonJS и будет CommonJS =)
es6
https://github.com/nervgh/es6-app-sample
так и будет
Я затупил)
Все работает)
Я не вкурю, на сколько я понял эти плагины http://webpack.github.io/docs/list-of-plugins.html идут из коробки или нет?
эти плагины http://webpack.github.io/docs/list-of-plugins.html идут из коробки
да.
webpack.config.js
var webpack = require('webpack');
module.exports = {
//...
,
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
Тогда почему, получаю ошибку, когда делаю так
gulp.task( 'build', function( ) {
return gulp.src( "src/*.js" )
.pipe(webpack( {
plugins: [
new webpack.optimize.UglifyJsPlugin( {
output: {
filename: "videoPlayer360.min.js"
}
} )
],
output: {
filename: "videoPlayer360.js"
}
}))
TypeError: Cannot read property 'UglifyJsPlugin' of undefined
И еще какого, он мне собирает все файлы в папке, а не только те которые подключены через require?
cyber,
1. У меня grunt
2. Я не знаю почему, но это не отменяет предыдущий ответ(из коробки - да).
3. обычно значит, что неправильно указаны настройки.
У тебя кстати 2 output - это нормально?
1. У меня grunt
Чем больше юзаю gulp, тем больше собираюсь вернутся на grunt)
Gozar, буду разбиратся, спасибо)
И еще какого, он мне собирает все файлы в папке, а не только те которые подключены через require?
Потому что ему нужно подавать входной файл, а не все.
TypeError: Cannot read property 'UglifyJsPlugin' of undefined
Очевидно, гулп-вебпак не предоставляет доступа к нативным плагинам.
Надо либо реквайрить core-вебпак отдельно, либо, если уж используешь гульп, использовать гульп-плагины:
let webpack = require("gulp-wepback");
let uglify = require("gulp-uglify");
gulp.task("build", function() {
return gulp.src("src/index.js")
.pipe(webpack({
output: {
filename: "bundle.js"
}
}))
.pipe(uglify())
.pipe(gulp.dest("dest"));
})
А вообще, при отсутствии других тасков, кроме билда, можно обойтись и без сборщиков:
//webpack.config.js
module.exports = {
progress: true,
colors: true,
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
entry: './src/index.js',
output: {
path: './dist',
filename: 'bundle.js'
}
};
$ webpack
$ webpack --watch
http://webpack.github.io/docs/cli.html
vBulletin® v3.6.7, Copyright ©2000-2026, Jelsoft Enterprises Ltd. Перевод: zCarot