Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2015, 19:14
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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, но не допирает что делать дальше.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2015, 20:05
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

WebPack не юзал, но https://www.npmjs.com/package/browserify также решит твою проблему.
__________________
kobezzza
code monkey
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2015, 21:07
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

kobezzza,
Можно ответить по подробней? С учетом:
Сообщение от Gozar
Пытаюсь настроить WebStorm (PhpStorm) для работы с модулями.
потому, что ссылка на схожий ресурс мне никак не помогает.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2015, 23:19
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

Сообщение от Gozar
Я предполагал, что нужно использовать webpack, но не допирает что делать дальше.
теперь нужно собрать модули в один файл (бандл)

как вариант,
Сообщение от kobezzza
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, 18.01.2015 в 23:23.
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2015, 23:30
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

melky,
Спасибо тебе добрый человек. То, что нужно.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #6 (permalink)  
Старый 19.01.2015, 00:04
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

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

Имеется такая ссылка. Есть что добавить?)
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #7 (permalink)  
Старый 19.01.2015, 00:31
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

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

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

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


- webpack

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


Сообщение от nerv_
Имеется такая ссылка. Есть что добавить?)
я б добавил минус всё. ужасная инфа не читай, закрой

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

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

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


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

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

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

Последний раз редактировалось melky, 19.01.2015 в 00:55.
Ответить с цитированием
  #8 (permalink)  
Старый 19.01.2015, 00:38
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

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

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

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

не поддерживается. Это правда? Такая печаль)))
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #9 (permalink)  
Старый 19.01.2015, 00:49
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от nerv_
1. Правильно при использовании webpack, сервер может работать на любом языке, но, для сборки нужна нода?
да. эта программа написана на nodejs
Сообщение от nerv_
2. Вопрос любителям es6 и, в частности, 6to5: табличка гласит, что extends
class A extends B {}

не поддерживается. Это правда? Такая печаль)))
https://6to5.org/docs/tour/#classes
я хз тут - до 6to5 пока руки не дошли
Ответить с цитированием
  #10 (permalink)  
Старый 19.01.2015, 01:12
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

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

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

Цитата:
Такая печаль)))
>>печаль
>>)))
Да?)
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск