В данной уроке мы с вами напишем универсальный шаблон для создания модульного javascript приложения, поговорим об AMD и склеим все скрипты в один (не забудем также и о CSS).
Данный урок является логическим продолжением предыдущего скринкаста, повествующего о bower, так что мы начнём с тем же набором файлов, с которым закончили на последней нашей встрече.
Подготовка
1) index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script data-main="scripts/main.js" src="scripts/vendor/requirejs/require.js"></script>
</body>
</html>2) main.js:
require.config({
paths: {
"jquery" : "vendor/jquiery/jquery",
"underscore" : "vendor/underscore-amd/underscore",
"backbone" : "vendor/backbone-amd/backbone"
}
})
require(['views/app'], function (AppView) {
new AppView;
});3) app.js:
define(['backbone'], function (Backbone) {
var App = Backbone.View.extend({
initialize: function () {
console.log('привет!')
}
});
return App;
});RequireJS. Собираем проект.
1)
npm install -g requirejs2) app/build/app.build.js:
({
appDir: "../",
baseUrl: "scripts",
dir: "../../dist",
mainConfigFile: "../scripts/main.js",
name: "main",
optimazeCss: "standard"
})3)
r.js.cmd -o app/build/app.build.jsШаблон собран!
Источник:loftblog
