6to5 modules

[Gozar]

Пытаюсь настроить 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]

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

[Gozar]

kobezzza,
Можно ответить по подробней? С учетом:

Пытаюсь настроить WebStorm (PhpStorm) для работы с модулями.

потому, что ссылка на схожий ресурс мне никак не помогает.

[melky]

Как собрать проект, чтобы он запустился в браузере?

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\другое

если есть вопросы - вы знаете, где меня искать

[Gozar]

melky,
Спасибо тебе добрый человек. То, что нужно.

[nerv_]

melky, вопрос к доброму человеку , а также всем, кто располагает какой-либо инфой: чем отличаются requirejs, browserify & webpack друг от друга?

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

[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 (очень помогает при вёрстке проекта)

[nerv_]

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

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

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

class A extends B {}

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

[melky]

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

да. эта программа написана на nodejs

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

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

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

[Safort]

nerv_,

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

не поддерживается. Это правда?

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

Такая печаль)))

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