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, но не допирает что делать дальше.

WebPack не юзал, но https://www.npmjs.com/package/browserify также решит твою проблему.

kobezzza,
Можно ответить по подробней? С учетом: потому, что ссылка на схожий ресурс мне никак не помогает.

6to5 - переводчик кода. модули он не собирает. это значит, что нужно использовать сборщик модулей.

теперь нужно собрать модули в один файл (бандл)

как вариант,
но я адепт вебпака и расскажу на его примере.

у тебя немного неверный синтаксис модулей был, я подправил.

быстрый старт: 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 друг от друга?

Имеется такая ссылка. Есть что добавить?)

хм... свежестью :) RJS был первый, потом browserify, потом webpack.

я б рекомендовал попробовать всё. серьёзно, берёшь готовую маленькую приложуху (напр. ToDo App) и распихиваешь по модулям в соответствии со сборщиком

по моим ощущениям:

- RequireJS. я впервые увидел вообще программу для модулей. затра*ался править конфиг и читать мануалы. (кривая обучения!). было жалко, что собирает только JS.

- browserify. неплохо, неплохая общественность, хорошая скорость. немного магическая настройка (кривая обучения), но если разобраться, то неплохо


- webpack

минусы webpack - отсутствие полной документации (на самом деле, не важно), слабое коммьюнити (только начал раскручиваться)


я б добавил минус всё. ужасная инфа :) не читай, закрой :)

requirejs - отметается автоматически. это только AMD (асинхронные модули) и это нерасширяемо; и вообще, устарело. хотя стоит отдать должное - RJS породил новую моду, за что я уважаю этот проект.

насчёт других

вкратце - практически всё, что есть в browserify, есть и в webpack.
но далеко не всё, что есть в webpack, так же есть в browserify.

чего нет в webpack от browserify? настройки сборки через файл package.json . но вместо него используется файл JS, который исполняется (!) и экспортирует объект - имхо, это мощнее.

рекомендую прочесть срач интеллектуальную беседу от создателя browserify (это же substack написал сей инструмент, или меня под ночь плющит от курсача?)

имхо, топовая фишка webpack - встроенный Web сервер для разработки (!) на Express со встроенным Hot Module Replace (прокаченный LiveReload), а так же плагин для горячего обновления кода для React (очень помогает при вёрстке проекта)

melky, я пока ничего из этого плотно не юзал, поэтому такие вопросы :)

1. Правильно при использовании webpack, сервер может работать на любом языке, но, для сборки нужна нода?

2. Вопрос любителям es6 и, в частности, 6to5: табличка гласит, что extends

class A extends B {}

не поддерживается. Это правда? Такая печаль)))

да. эта программа написана на nodejs
https://6to5.org/docs/tour/#classes
я хз тут - до 6to5 пока руки не дошли

nerv_,
*вкатился в тред*
Не верь ей, это очень хреновая табличка. Усё в 6to5 поддерживается, верь мне.

>>печаль
>>)))
Да?)