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,
Можно ответить по подробней? С учетом: Цитата:
|
Цитата:
Цитата:
как вариант, Цитата:
у тебя немного неверный синтаксис модулей был, я подправил. быстрый старт: 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 друг от друга?
Имеется такая ссылка. Есть что добавить?) |
Цитата:
я б рекомендовал попробовать всё. серьёзно, берёшь готовую маленькую приложуху (напр. ToDo App) и распихиваешь по модулям в соответствии со сборщиком по моим ощущениям: - RequireJS. я впервые увидел вообще программу для модулей. затра*ался править конфиг и читать мануалы. (кривая обучения!). было жалко, что собирает только JS. - browserify. неплохо, неплохая общественность, хорошая скорость. немного магическая настройка (кривая обучения), но если разобраться, то неплохо - webpack ![]() минусы webpack - отсутствие полной документации (на самом деле, не важно), слабое коммьюнити (только начал раскручиваться) Цитата:
requirejs - отметается автоматически. это только AMD (асинхронные модули) и это нерасширяемо; и вообще, устарело. хотя стоит отдать должное - RJS породил новую моду, за что я уважаю этот проект. насчёт других вкратце - практически всё, что есть в browserify, есть и в webpack. но далеко не всё, что есть в webpack, так же есть в browserify. чего нет в webpack от browserify? настройки сборки через файл package.json . но вместо него используется файл JS, который исполняется (!) и экспортирует объект - имхо, это мощнее. рекомендую прочесть имхо, топовая фишка webpack - встроенный Web сервер для разработки (!) на Express со встроенным Hot Module Replace (прокаченный LiveReload), а так же плагин для горячего обновления кода для React (очень помогает при вёрстке проекта) |
melky, я пока ничего из этого плотно не юзал, поэтому такие вопросы :)
1. Правильно при использовании webpack, сервер может работать на любом языке, но, для сборки нужна нода? 2. Вопрос любителям es6 и, в частности, 6to5: табличка гласит, что extends class A extends B {} не поддерживается. Это правда? Такая печаль))) |
Цитата:
Цитата:
я хз тут - до 6to5 пока руки не дошли |
nerv_,
Цитата:
Не верь ей, это очень хреновая табличка. Усё в 6to5 поддерживается, верь мне. Цитата:
>>))) Да?) |
melky,
Цитата:
|
Цитата:
Цитата:
но игрался я docker'ом, fig'ом и vagrant'ом :blink: LEGO! |
Цитата:
|
Цитата:
|
Цитата:
|
Тут написано, что эта штука поддерживает es6 модули.
Вопрос нафига тогда requirejs, browserify & webpack? :) |
Цитата:
|
Цитата:
По умолчанию 6to5 транслирует в common модули(что лично я считаю оптимальным), но ты можешь настроить в любые другие, даже свои придумать. в остальном ответил kobezzza |
melky, что-то я не пойму, как мне в конфиге вебпака прописать опцию entry. Согласно доке, данный параметр либо строка, либо хеш. А у меня в файловой структуре такой замес https://yadi.sk/i/ODUHnMnTe8Efc где вложенность произвольная
|
Цитата:
|
melky, я пытаюсь понять, как это работает :D
Мне от него нужен bundle, насколько я понимаю, чтобы юзать в браузере. Как его получить? Я понимаю так, что мне нужно указать все файлы, которые будут в пакете (bundle) и это указывается в хэше entry. Или я заблуждаюсь? |
Цитата:
ниже - дерево модулей ![]() кружок - начало; входная точка, т.е. entry параллелограммы - модули вызываются внутри entry файла ( вызов - это require('jquery') ) трапеции - модули цепляются из "параллелограммов" как работает ? хм... ну он парсит указанные entry файлы на предмет вызова модулей, а затем рекурсивно парсит вызываемые модули на предмет вызова модулей :) |
melky, ну, пока он ничего не парсит, а шлет меня на х*й в течении последних двух часов :D
https://yadi.sk/i/BP-I6HNAe8GTJ Чувствую, что буду пробовать browserify))) |
Цитата:
попробуй указать относительный путь к entry (т.е. относительно файла webpack.config.js) конкретно в твоем случае это "./httpdocs/js/project.js" (вроде бы) P.S. непрошенный совет resolve.extensions лучше не правь - это для advanced юзеров ) на скрине вижу, ты забыл про index.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']); }; Цитата:
Цитата:
|
Цитата:
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> Спасибо. |
Цитата:
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 это умеет. Где подгрузка модулей с сервера? Я взял его именно за этим. Их есть у вас? |
Цитата:
Цитата:
Цитата:
|
Берем файл кладем на сервер, он работает, кладем в проект браузера и он работает, разве не круто?
|
Цитата:
Цитата:
некуда не убежишь от пересборки. но этот процесс можно облегчить - используя инкрементальную сборку (watch и cache в конфиге), а так же вывод файлов в оперативную память (а не на диск) - это уже webpack-dev-server Цитата:
Цитата:
подзагрузка модулей есть у require js - походу, его функционал тебе и нужен такого функционала вряд ли найдешь, потому что он ... не используется |
Gozar, melky, всем спасибо :)
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
require is not defined Тобишь AMD. Цитата:
Цитата:
|
Цитата:
|
Цитата:
Цитата:
даже namespace в глобале - это уже "насрал". модули работают без namespace. модули не оставляют после себя ничего, если ты прямо это не укажешь. Цитата:
если будешь переводить на диск, то тут будет адский тормоз в вводе\выводе (IO), вне зависимости от HDD\SSD. чем меньше "шестерёнок в механизме", тем быстрее он работает. Цитата:
я ж типа джуниор сам... (наверное) и нихрена не знаю :cray: - говорю, что сам выучил Цитата:
Цитата:
Цитата:
Цитата:
а если велосипед сделали до тебя; и причём, его поддерживают? принять новое - трудно (особенно если оно чужое), но, иногда, овчинка стоит выделки. закон сохранения энергии в силе!!! люди тратят энергию на разработку инструмента, а ты тратишь её на изучение инструмента. что проще - делать с нуля, или изучить готовое? P.S. материаловед сдал сессию на степуху - я пьяный. сильно в почки не пинайте :nono: |
melky,
Цитата:
|
Цитата:
![]() |
Цитата:
|
Часовой пояс GMT +3, время: 12:56. |