Если вы только что нашли это сообщение, просмотрите предыдущие сообщения, которые запускаются с помощью Node: Часть 1, Часть 2.
Разветвите и клонируйте репо из части 2, чтобы следовать, или готовое репо здесь.
Начнем с Webpack: Webpack - это сборщик модулей, поддерживающий разделение кода. Короче говоря, это позволяет вам использовать только код, необходимый вашему приложению. Вы явно указываете Webpack, что необходимо, через требующие модули в вашем коде (например, require (‘angular’)). Это сообщение в блоге очень хорошо объясняет Webpack: http://blog.andrewray.me/webpack-when-to-use-and-why/
Серьезно, перестаньте читать это на 2 секунды и перейдите по этой ссылке и прочтите. Тогда возвращайся.
Давайте начнем! В терминале:
npm install angular webpack --save
Это добавит эти библиотеки в ваш package.json, а также установит и сохранит их в папке node_modules. В свои скрипты package.json вы также захотите включить это:
“bundle”: “webpack”
Мы скоро вернемся к этому, но именно так вы на самом деле собираете свой код с помощью Webpack. Теперь в каталоге вашего проекта создайте файл с именем «webpack.config.js» и папку с именем «bundles» и добавьте следующий код:
//webpack.config.js
var webpack = require(‘webpack’);
module.exports = {
context: __dirname + ‘/js’,
entry: {
app: ‘./app.js’,
vendor: [‘angular’]
},
output: {
path: __dirname + ‘/bundles’,
filename: ‘app.bundle.js’
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(“vendor”, “vendor.bundle.js”)
]
};
Приведенный выше код - это то, что вызывается при запуске Webpack. Внутри вашего module.exports:
Контекст: это указывает на расположение кода, который вы хотите объединить. Мы говорим: внутри нашей папки «js» свяжите наш файл app.js и включите Angular.
Вывод: здесь будут сгенерированы наши связанные файлы кода при запуске Webpack. Мы говорим Webpack вызвать файл app.bundle.js и поместить его в папку с именем «bundles» в каталоге нашего проекта.
Плагины: здесь мы сообщаем Webpack, как мы хотим объединить Angular. Мы говорим: любые библиотеки, указанные выше, с ключом поставщика, объединяются как vendor.bundle.js.
Сейчас самое время удалить из вашего index.html некоторые элементы, которые вам больше не нужны:
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src=”js/app.js”></script> <script src=”js/controllers/HomeController.js”></script>
И замените на:
<script src=”bundles/vendor.bundle.js”></script> <script src=”bundles/app.bundle.js”></script>
Это говорит нашему сайту, что для правильной работы ему необходимо загрузить связанные файлы. Поскольку html анализирует сверху вниз, вам необходимо разместить пакет поставщика над пакетом приложения, поскольку это файл, содержащий Angular (а app.bundle.js требует запуска Angular!).
Хорошо, мы почти закончили - еще пара небольших настроек. Перейдем к нашим контроллерам Angular:
var angular = require(‘angular’);
function HomeController() {
this.welcome = “Hello World! We’re using Angular!”;
}
angular.module(‘app’).controller(‘HomeController’, HomeController);
Вы заметите, что он почти идентичен нашему контроллеру из Части 2 этого блога. Единственная строка, которую мы изменили, - это строка 1, которая сообщает Webpack, что нам нужен Angular в этом файле, чтобы он мог найти соответствующий пост-пакет кода Angular. Теперь к нашему app.js:
angular.module(‘app’, []); require(‘./controllers/HomeController’);
То же самое и здесь - последняя строка - единственная, которая была изменена. Требуя здесь наш контроллер, наш модуль теперь может видеть наш контроллер. Если у вас есть какие-либо сервисы, компоненты, директивы ... также потребуйте их здесь.
Это все, что вам нужно сделать - Webpack теперь интегрирован с вашим приложением Node + Angular! В терминале:
npm run bundle
Помните сценарий "bundle", который мы добавили в наш package.json ранее? Вышеупомянутая команда запускает Webpack. Вы должны увидеть в своем терминале что-то вроде этого:
// ♥ npm run bundle > [email protected] bundle /Users/Joe/Documents/dev/node-blog-part-3 > webpack Hash: 3c94e91c513518a64f00 Version: webpack 1.13.2 Time: 758ms Asset Size Chunks Chunk Names app.bundle.js 422 bytes 0 [emitted] app vendor.bundle.js 1.22 MB 1 [emitted] vendor [0] ./app.js 69 bytes {0} [built] [0] multi vendor 28 bytes {1} [built] [1] ./controllers/HomeController.js 188 bytes {0} [built] + 2 hidden modules
Это хороший результат - Webpack успешно объединил ваш исходный код и фреймворк Angular! В вашем терминале:
node server.js
и перейдите по адресу http: // localhost: 8080, и вы должны увидеть:
Короче говоря, это жизненно важная часть вашего набора инструментов, если вы пользователь Angular. Webpack - отличный инструмент, однако он не лишен недостатков. Команда Webpack растет, но все еще очень мала. Документация оставляет желать лучшего. Однако, если вы разрабатываете большое одностраничное приложение, Webpack может быть очень полезным для обеспечения быстрой и бесперебойной работы.
Бонусный уровень: у Webpack есть сервер разработки, который я здесь не использовал, чтобы продолжать эту серию без возврата, однако он довольно хорош и легко интегрируется, заменяя написанный нами сервер. Проверить это:
