Почему модуль is undefined?

Question

[Worddoc]

Начал изучение Require js и сразу застрял.

Структура

folder
——main.js
——modules
————dom.js
————func.js

//main.js

requirejs.config({
	paths: {
		"func" : "modules/func",
		"dom": 'modules/dom'
	}
});

require(['func'],function(func){
	app.color();
});

//dom.js

var elem = document.querySelector('body');

//func.js

define(['dom'], function(dom) {
  var app = {
    color: function() {
      elem.style.background = 'red';
    }
  };

  return app;
});

Ошибка: app is not defined.

Вопрос: почему модуль is undefined, если я вернул объект-модуль через define? Как успешно подгрузить модуль func.js с зависимостью dom.js, в файл-конфиг main.js?

Answer 1

[Константин Китманов]

Важный disclaimer: не изучайте RequireJS, уже есть нативные модули, которые совсем скоро будут доступны прямо в браузерах и nodejs.

Почитайте про область видимости в JS:
https://learn.javascript.ru/functions-closures
https://developer.mozilla.org/ru/docs/Web/JavaScri...

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

//main.js
requirejs.config({
    paths: {
        "app": "modules/app",
        "dom": 'modules/dom'
    }
});

require(['app'], function (app) {
    app.color();
});


//dom.js
define([], function() {
    return document.querySelector('body');
})


//app.js
define(['dom'], function (dom) {
    var app = {
        color: function () {
            dom.style.background = 'red';
        }
    };

    return app;
});

Comments

[Worddoc]

Большое спасибо. А как быть с плохой поддержкой es6 модулей? Даже сейчас небольшое кол-во раузеров поддерживает это. Придется ждать смерти старых версий браузеров? Или будут полифиллы для этого?

[Константин Китманов]

Я уже несколько лет пишу только es6-импорты, не жду милостей от природы:)

На данный момент есть два варианта:

1. транспиляция, превращающая import/export в commonjs (с последующей сборкой browserify при необходимости) или amd
   
2. загрузчики, понимающие import/export (и все остальные форматы модулей) и загружающие модули каким-то своим образом (es-module-loader, SystemJS, webpack)
   

Моя личная рекомендация это webpack, потому что понимает все из коробки плюс куча плюшек (live-reload, hot-reload, ленивая загрузка кода, не нужен grunt или, не дай боже, gulp).

[Worddoc]

Константин Китманов: а есть какие-то подходы для "правильного" разделения JS кода? Т.е. на какие логические модули код нужно разделять?

[Константин Китманов]

Worddoc: так же как с функциями, классами, компонентами и прочим: принцип единственной ответственности.

[Worddoc]

Константин Китманов: Немного не понимаю четкой разницы между gulp и webpack. Gulp - сборщик проекта. Webpack - сборщик проекта(со всеми плагинами, что есть в Gulp) + загрузчик модулей. Я правильно себе это представляю? И оправдано ли использование webpack в маленьких(или очень маленьких, например простой лендинг) проектах?

[Константин Китманов]

gulp сам по себе ничего не умеет, это т.н. task-runner. То есть его ответственность — запускать какие-то задачи в определенном порядке. Чтобы собственно собрать проект, надо добавить плагинов (gulp-babel, gulp-browserify, gulp-sass и так далее, тысячи их).

webpack именно сборщик (или иногда говорят bundler), его ответственность — взять кучку файлов и выдать один (иногда несколько, но не суть:)), при необходимости — сжатый для продакшена. Из коробки он понимает только JS (во всех форматах модулей), для sass/less/stylus и прочего надо ставить т.н. loader'ы.

Теоретически gulp гораздо гибче и может делать гораздо больше, но на практике 95%, если не больше, может webpack. Так же возможно запускать webpack из gulp.

Я бы сказал, что оправданно, потому что разрабатывать с ним действительно удобно, а оверхед в продакшене один из самых маленьких. Но учтите, что у webpack все-таки довольно крутая кривая обучения, хотя в минимальном виде это и выглядит примерно как webpack -d --entry index.js --output-path dist/. Советую на первых порах брать готовые бойлерплейты (или что-то вроде create-react-app).

[Worddoc]

Константин Китманов: Большое спасибо за информацию. +45 очков кармы вам за вклад в просветление умов:)

Сорри за оффтоп, имеются ли у вас макеты на верстку? Пытаюсь найти сложные бесплатные макеты для вклада их в портфолио, но дело идет туго. Быть может у вас найдутся?)

[Константин Китманов]

Worddoc: на здоровье:) Нет, нету. Тут смотрели? https://www.templatemonster.com/free-templates.php

[Worddoc]

Константин Китманов: Смотрел, но не видел этого раздела на сайте. Спасибо за ссылку. К сожалению, там дается уже сверстанный шаблон, а psd запоролены. Будет нечестно пихать чужую работу себе в потрфолио.

Кстати, уместно ли будучи фрилансером или в поисках первой работы иметь 1 рабочую страницу(обычно, это главная страница) сайта-примера в портфолио?

[Константин Китманов]

Worddoc: Там вроде есть раздел именно с PSD.

Тут не подскажу, последний раз проблемы с поиском работы были 10 лет назад:)

[Worddoc]

Константин Китманов: Спасибо) Если нужен будет верстальщик на удаленку или просто на проект:
[e-mail]
vk.com/worddoc
Telegram: @Worddoc

Networking, сами понимаете)