Javascript-форум (https://javascript.ru/forum/)
-   Сборка проекта, утилиты (https://javascript.ru/forum/server-tools/)
-   -   6to5 modules (https://javascript.ru/forum/server-tools/53039-6to5-modules.html)

Gozar 18.01.2015 19:14

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 также решит твою проблему.

Gozar 18.01.2015 21:07

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

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

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

melky 18.01.2015 23:19

Цитата:

Сообщение от 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\другое

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

Gozar 18.01.2015 23:30

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

nerv_ 19.01.2015 00:04

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

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

melky 19.01.2015 00:31

Цитата:

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

nerv_ 19.01.2015 00:38

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

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

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

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

melky 19.01.2015 00:49

Цитата:

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

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

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

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

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

Safort 19.01.2015 01:12

nerv_,
Цитата:

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

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

Цитата:

Такая печаль)))
>>печаль
>>)))
Да?)

Safort 19.01.2015 01:14

melky,
Цитата:

я хз тут - до 6to5 пока руки не дошли
совсем со своими реактами и флаксами заигрался, шо аж про es6 забыл!

melky 19.01.2015 01:36

Цитата:

Сообщение от Safort
*вкатился в тред*

they see me rollin )

Цитата:

Сообщение от Safort (Сообщение 352124)
melky,
совсем со своими реактами и флаксами заигрался, шо аж про es6 забыл!

не, у меня сессия и курсач

но игрался я docker'ом, fig'ом и vagrant'ом :blink: LEGO!

cyber 19.01.2015 02:16

Цитата:

Сообщение от melky
не, у меня сессия и курсач

Как я тебя понимаю, с чем самый большой головняк?)

melky 19.01.2015 02:39

Цитата:

Сообщение от cyber (Сообщение 352137)
Как я тебя понимаю, с чем самый большой головняк?)

с курсачём. потому что его нужно было сдать до Н.Г. (так в приказе написано) :lol:

cyber 19.01.2015 02:49

Цитата:

Сообщение от melky
с курсачём. потому что его нужно было сдать до Н.Г. (так в приказе написано)
_

Ыыы, та да. Это один из + Украинских универов)

nerv_ 19.01.2015 12:21

Тут написано, что эта штука поддерживает es6 модули.
Вопрос нафига тогда requirejs, browserify & webpack? :)

kobezzza 19.01.2015 12:35

Цитата:

Сообщение от nerv_ (Сообщение 352155)
Тут написано, что эта штука поддерживает es6 модули.
Вопрос нафига тогда requirejs, browserify & webpack? :)

6to5 поддерживает синтаксис модулей и умеет транслировать его в CJS, AMD и UMD, но для сборки файлов в один (если такое нужно) нужно юзать отдельный инструмент.

Gozar 19.01.2015 13:42

Цитата:

Сообщение от nerv_
Тут написано, что эта штука поддерживает es6 модули.
Вопрос нафига тогда requirejs, browserify & webpack?

В первом посте этого топика даже есть пример, что именно ты имеешь в es6 и что ты получишь в es5 (build/src/module.js)
По умолчанию 6to5 транслирует в common модули(что лично я считаю оптимальным), но ты можешь настроить в любые другие, даже свои придумать.

в остальном ответил kobezzza

nerv_ 21.01.2015 00:19

melky, что-то я не пойму, как мне в конфиге вебпака прописать опцию entry. Согласно доке, данный параметр либо строка, либо хеш. А у меня в файловой структуре такой замес https://yadi.sk/i/ODUHnMnTe8Efc где вложенность произвольная

melky 21.01.2015 00:29

Цитата:

Сообщение от nerv_ (Сообщение 352481)
melky, что-то я не пойму, как мне в конфиге вебпака прописать опцию entry. Согласно доке, данный параметр либо строка, либо хеш. А у меня в файловой структуре такой замес https://yadi.sk/i/ODUHnMnTe8Efc где вложенность произвольная

ты хочешь указать angular, jquery sugarjs и другое как entry ? я не понял \ сплю

nerv_ 21.01.2015 00:35

melky, я пытаюсь понять, как это работает :D
Мне от него нужен bundle, насколько я понимаю, чтобы юзать в браузере. Как его получить?

Я понимаю так, что мне нужно указать все файлы, которые будут в пакете (bundle) и это указывается в хэше entry.
Или я заблуждаюсь?

melky 21.01.2015 00:45

Цитата:

Сообщение от nerv_ (Сообщение 352486)
melky, я пытаюсь понять, как это работает :D
Мне от него нужен bundle, насколько я понимаю, чтобы юзать в браузере. Как его получить?

Я понимаю так, что мне нужно указать все файлы, которые будут в пакете (bundle) и это указывается в хэше entry.
Или я заблуждаюсь?

entry - входная точка

ниже - дерево модулей

кружок - начало; входная точка, т.е. entry
параллелограммы - модули вызываются внутри entry файла ( вызов - это require('jquery') )
трапеции - модули цепляются из "параллелограммов"

как работает ? хм... ну он парсит указанные entry файлы на предмет вызова модулей, а затем рекурсивно парсит вызываемые модули на предмет вызова модулей :)

nerv_ 21.01.2015 00:59

melky, ну, пока он ничего не парсит, а шлет меня на х*й в течении последних двух часов :D

https://yadi.sk/i/BP-I6HNAe8GTJ

Чувствую, что буду пробовать browserify)))

melky 21.01.2015 01:04

Цитата:

Сообщение от nerv_ (Сообщение 352490)
melky, ну, пока он ничего не парсит, а шлет меня на х*й в течении последних двух часов :D
https://yadi.sk/i/BP-I6HNAe8GTJ


попробуй указать относительный путь к entry (т.е. относительно файла webpack.config.js)

конкретно в твоем случае это "./httpdocs/js/project.js" (вроде бы)


P.S. непрошенный совет resolve.extensions лучше не правь - это для advanced юзеров ) на скрине вижу, ты забыл про index.js (пустая строка). см доку

Цитата:

Сообщение от nerv_ (Сообщение 352490)
Чувствую, что буду пробовать browserify)))

перебежчик :)

nerv_ 21.01.2015 11:48

Цитата:

Сообщение от melky
опробуй указать относительный путь к entry (т.е. относительно файла webpack.config.js)

у меня весь конфиг в грант-файле

Цитата:

Сообщение от melky
конкретно в твоем случае это "./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']);
};


Цитата:

Сообщение от melky
P.S. непрошенный совет resolve.extensions

удалил

Цитата:

Сообщение от melky
перебежчик

не, я был бы им, если использовал веб-пак. Мне его даже запустить не удалось)

Gozar 21.01.2015 14:13

Цитата:

Сообщение от nerv_
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"
    }

nerv_ 21.01.2015 14:26

Gozar, ага, я тоже на это думал. Но, поскольку в данный момент я запускаю веб-пак без необходимости конвертации из es6 в es5, то, как я думал, в моем случае загрузчик должен быть другим (обычным).

Закомментил
//{test: /\.js$/, loader: '6to5'}

сборка завершилась успешно :dance:

Спасибо :)

nerv_ 21.01.2015 15:18

Отложил в сторону webpack, поставил browserify, собрал bundle.js.

Мне просто нужен глобальный синхронный (на первое время) require. Насколько я понимаю, require доступен только внутри bundle. Как его вытащить наружу и возможно ли это?

<script src="/js/bootstrap.js"></script>

<script>
    <!-- тут ошибка require is undefined -->
    require('/js/native/plugins/core.js');
</script>


Спасибо.

melky 21.01.2015 16:40

Цитата:

Сообщение от nerv_
ERROR in Entry module not found: Error: Cannot resolve module 'script' in %PATH%

`script-loader` установлен?
Gozar, уже в теме :)
Цитата:

Сообщение от nerv_
Gozar, ага, я тоже на это думал. Но, поскольку в данный момент я запускаю веб-пак без необходимости конвертации из es6 в es5, то, как я думал, в моем случае загрузчик должен быть другим (обычным).

тогда можно его вообще вырубить (загрузчик на js файлы)
Цитата:

Сообщение от nerv_
Мне просто нужен глобальный синхронный (на первое время) require. Насколько я понимаю, require доступен только внутри bundle. Как его вытащить наружу и возможно ли это?

шото странное ты делаешь :)

Gozar 21.01.2015 16:53

Цитата:

Сообщение от melky
Gozar, уже в теме

:)

nerv_,
Не спеши, разложи в голове по полочкам.

nerv_ 21.01.2015 17:33

Цитата:

Сообщение от melky
шото странное ты делаешь

в рамках веб-пака

у меня файл следующего вида
// 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 это умеет. Где подгрузка модулей с сервера? Я взял его именно за этим. Их есть у вас?

Gozar 21.01.2015 18:23

Цитата:

Сообщение от nerv_
Где подгрузка модулей с сервера?

Мой загрузчик именно это и делал, тянул с сервера tpl, css, js. В итоге сейчас я хочу webpack и сборку на клиенте. Напиши его сам если хочешь. Не нравится webpack, ну дык никто не застявляет, ты же сам на browserify...

Цитата:

Сообщение от nerv_
есть другие разрабы, кот. про node.js и grunt не слышали вообще, а работать с проектом им придется.

Ты уверен, что они смогут писать код, если даже не знают про ноду и грунт?

Цитата:

Сообщение от nerv_
За день использования веб-пака ценности я в нем не увидел. В чем она? Собирать проекта в один файл? grunt-concat это умеет

а грунт конкат умеет писать на es6 с синтаксисом модулей es6 и затем запускать проект в браузере?

Gozar 21.01.2015 18:25

Берем файл кладем на сервер, он работает, кладем в проект браузера и он работает, разве не круто?

melky 21.01.2015 18:54

Цитата:

Сообщение от nerv_
который после сборки превращается в один js файл (bundle), в который напиханы все require файлы. Именно полностью код включен. Я ожидал, что файлы будут подтягиваться с сервера.

зачем тебе модули тогда вообще?
Цитата:

Сообщение от nerv_
Не горю желанием каждый раз пересобирать bundle.

концептуально глянь - как тогда переводить код из других языков в JS, причем на лету? а source map?

некуда не убежишь от пересборки. но этот процесс можно облегчить - используя инкрементальную сборку (watch и cache в конфиге), а так же вывод файлов в оперативную память (а не на диск) - это уже webpack-dev-server
Цитата:

Сообщение от nerv_
Даже если я это автоматизирую, есть другие разрабы, кот. про node.js и grunt не слышали вообще, а работать с проектом им придется.

не понял, о чём ты здесь. README.md для слабаков?
Цитата:

Сообщение от nerv_
За день использования веб-пака ценности я в нем не увидел. В чем она? Собирать проекта в один файл? grunt-concat это умеет. Где подгрузка модулей с сервера? Я взял его именно за этим. Их есть у вас?

убирай тогда нафиг предобработку скриптов (сборщик т.е.)
подзагрузка модулей есть у require js - походу, его функционал тебе и нужен

такого функционала вряд ли найдешь, потому что он ... не используется

nerv_ 22.01.2015 14:14

Gozar, melky, всем спасибо :)

Цитата:

Сообщение от melky
зачем тебе модули тогда вообще?

что значит зачем? Чтобы не гадить в глобал

Цитата:

Сообщение от melky
концептуально глянь - как тогда переводить код из других языков в JS, причем на лету? а source map?

а зачем мне налету переводить? Переводить я могу через терминал по мере необходимости. Речь идет о том, что часть кода (es6) буду переводить я, а часть будет писаться на es6/es3 (уже не мной).

Цитата:

Сообщение от melky
некуда не убежишь от пересборки

разумеется. Просто мне хотелось бы, чтобы "модули" грузились с сервера. А уж как и чем они будут собираться - дело десятое. Я вчера подумал, видимо, буду начинать с requirejs. А к тому времени, как плотно его поюзаю, глядишь нативный import/export появится.

Цитата:

Сообщение от melky
не понял, о чём ты здесь. README.md для слабаков?

там чуваки гитом пользуются постольку-поскольку :)

Цитата:

Сообщение от melky
убирай тогда нафиг предобработку скриптов (сборщик т.е.)
подзагрузка модулей есть у require js - походу, его функционал тебе и нужен

ага, так и поступлю. Единственное что: я читал, что веб-пак это тоже умеет и пытался от него этого добиться на случай, если в недалеком будущем мне все-таки понадобится предварительная сборка. В доке и гугле не нашел примеров на этот счет. За рамками предобработчика
require is not defined

Тобишь AMD.

Цитата:

Сообщение от Gozar
Берем файл кладем на сервер, он работает, кладем в проект браузера и он работает, разве не круто?

конечно, круто :)

Цитата:

Сообщение от Gozar
Мой загрузчик именно это и делал, тянул с сервера tpl, css, js. В итоге сейчас я хочу webpack и сборку на клиенте.

любопытно, почему?

Gozar 22.01.2015 14:43

Цитата:

Сообщение от nerv_
любопытно, почему?

Наверное потому, что неудобно тянуть сотни файлов с сервера, вместо одного сжатого.

melky 22.01.2015 20:09

Цитата:

Сообщение от nerv_ (Сообщение 352790)
Gozar, melky, всем спасибо :)

стараюсь вразумить - причиняю добро. :) трудно принять новое, конечно (сам тупил и отступал, но пересилил... и получил плюхи)

Цитата:

Сообщение от nerv_ (Сообщение 352790)
что значит зачем? Чтобы не гадить в глобал

не срать в глобал - правильно.
даже namespace в глобале - это уже "насрал". модули работают без namespace.
модули не оставляют после себя ничего, если ты прямо это не укажешь.

Цитата:

Сообщение от nerv_ (Сообщение 352790)
а зачем мне налету переводить? Переводить я могу через терминал по мере необходимости. Речь идет о том, что часть кода (es6) буду переводить я, а часть будет писаться на es6/es3 (уже не мной).

на лету переводить - простая формальность; абстракция от языка, на котором написан твой код (я про source map)

если будешь переводить на диск, то тут будет адский тормоз в вводе\выводе (IO), вне зависимости от HDD\SSD. чем меньше "шестерёнок в механизме", тем быстрее он работает.

Цитата:

Сообщение от nerv_ (Сообщение 352790)
разумеется. Просто мне хотелось бы, чтобы "модули" грузились с сервера. А уж как и чем они будут собираться - дело десятое. Я вчера подумал, видимо, буду начинать с requirejs. А к тому времени, как плотно его поюзаю, глядишь нативный import/export появится.

угумс, надо дозреть :) не хай webpack зазря. я вангую - через месяц-два сам ах*евать будешь от того, что он могёт.

я ж типа джуниор сам... (наверное) и нихрена не знаю :cray: - говорю, что сам выучил

Цитата:

Сообщение от nerv_ (Сообщение 352790)
там чуваки гитом пользуются постольку-поскольку :)

йоу! в моей "большой деревне" такая же проблема... но я не сдаюсь :)

Цитата:

Сообщение от nerv_ (Сообщение 352790)
я читал, что веб-пак это тоже умеет и пытался от него этого добиться на случай, если в недалеком будущем мне все-таки понадобится предварительная сборка. В доке и гугле не нашел примеров на этот счет. За рамками предобработчик

в вебпаке есть предзагрузка "по требованию" (bundle-loader), но от предобработки всёравно не отделаешься

Цитата:

Сообщение от nerv_ (Сообщение 352790)
любопытно, почему?

см внизу.
Цитата:

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

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


P.S. материаловед сдал сессию на степуху - я пьяный. сильно в почки не пинайте :nono:

Safort 22.01.2015 21:04

melky,
Цитата:

я ж типа джуниор сам... (наверное) и нихрена не знаю - говорю, что сам выучил
Опять издеваешься?)

melky 22.01.2015 21:21

Цитата:

Сообщение от Safort (Сообщение 352865)
melky,

Опять издеваешься?)

заниженная самооценка. это то, что заставляет меня двигаться вперёд... крутит мои шестерёнки, так сказать :)


cyber 22.01.2015 22:35

Цитата:

Сообщение от melky
заниженная самооценка. это то, что заставляет меня двигаться вперёд

+1;)


Часовой пояс GMT +3, время: 12:56.