Настройка проекта VueJS с нуля (Webpack)
В настоящее время в нашем распоряжении есть множество инструментов, просто запустив vue init webpack my-project, я получу проект vue с webpack за считанные секунды. U+1F603
Отлично, правда?
В целом да, это здорово, но проблема в том, что так много начинающих разработчиков, и даже некоторые более опытные могут начать проект, подобный этому, на самом деле не зная инструментов, которые это дает вам, и когда приходит время добавить что-то, они просто не знают, с чего начать U+1F615
Итак, сегодня мы настроим проект Vue с нуля, включая Webpack. Это покажет нам, почему мы используем NPM и Webpack в первую очередь.
После того, как у вас будет базовое понимание, я бы по-прежнему рекомендовал использовать каркасные проекты, которые мы создаем из командной строки, поскольку они выполняют много работы, которая, откровенно говоря, может быть занозой в заднице!
Итак приступим!!!
** пожалуйста, убедитесь, что у вас установлен узел, чтобы следовать этому руководству
Первый шаг
Первый шаг — это создание папки для нашего проекта. Проект, который я буду создавать, — это MacroNutrient Tracker, так что это имя, которое я дам своей папке.
Итак, как вы можете видеть выше в моем VSCode, у меня есть пустой каталог с именем MacroTracker.
Теперь давайте создадим нашу страницу index.html в корне нашего каталога со следующим кодом:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MacroTracker</title>
</head>
<body>
</body>
</html>
Мы можем преобразовать это в приложение Vue, добавив в тело следующее:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MacroTracker</title>
</head>
<body>
<div id="container">
{{value}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js" ></script>
<script>
new Vue({
el: '#container',
data: {
value: 'Welcome to Vue!',
},
});
</script>
</body>
</html>
Если мы откроем этот файл в браузере, то получим следующее:
Прекрасно, теперь мы официально начали наше путешествие по созданию приложения Vue, конечно, пока это не так много, но такие небольшие шаги помогут нам действительно понять архитектуру нашего проекта.
Менеджер пакетов JavaScript
Итак, если вы только начинаете заниматься веб-разработкой, вы можете спросить, что такое менеджер пакетов?
Итак, во-первых, пакет — это часть программного обеспечения, которое вы можете использовать в своем проекте, существуют буквально тысячи пакетов, от таких вещей, как средства выбора даты, до фреймворков Javascript (например, Vue).
В последнем разделе мы использовали следующий код:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
Наш пакет — это библиотека vuejs, интерфейсные проекты прошли долгий путь и требуют гораздо больше зависимостей, поэтому нам нужен был лучший способ управления нашими пакетами, и вместе с ним появился NPM (раньше были и другие, но NPM сейчас наиболее часто используется, хотя Yarn набирает обороты). популярность).
Таким образом, менеджер пакетов позволит нам управлять нашими пакетами и легко обновлять и удалять их, если мы того пожелаем.
Начать работу с npm очень просто, перейдите к своему проекту с помощью командной строки и запустите
$ npm init
Теперь вам будут задавать вопросы, все значения по умолчанию в порядке, поэтому просто продолжайте нажимать Enter.
Теперь у нас есть файл package.json в корне нашего проекта, который должен выглядеть примерно так:
{
"name": "macrotracker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Хотите верьте, хотите нет, теперь у нас есть настроенный менеджер пакетов, не так уж плохо, а?
Добавление зависимостей
Итак, поскольку мы приложили все усилия для настройки нашего менеджера пакетов, мы должны использовать его и добавить некоторые зависимости.
Поскольку мы разрабатываем проект Vue, первая зависимость, которую мы добавим, будет VueJS.
Чтобы добавить Vue, просто запустите следующую команду в CMD
$ npm install vue --save
Так что же только что произошло?
Vue был добавлен в наш файл package.json следующим образом:
"dependencies": {
"vue": "^2.5.16"
}
У нас также есть новый каталог с именем node_modules, где будут храниться все наши пакеты (что очень удобно).
Мы могли бы сделать ссылку на Vue в нашем index.html следующим образом:
<script src="node_modules/vue/dist/vue.min.js"></script>
Но вы можете подумать: «Разве это не заноза в заднице, чтобы напрямую сопоставлять местоположение каждой зависимости», и да, вы были бы правы, думая об этом, поэтому следующим шагом будет введение зверя, который представляет собой Webpack !
Скажи привет вебпаку
Webpack — это сборщик модулей, и это означает, что он объединяет все наши модули в один файл, на который мы будем ссылаться в нашем index.html.
Итак, как и Vue, Webpack — это зависимость, которую мы должны установить, чтобы использовать ее:
$ npm install webpack --save-dev
Это выглядит иначе, чем наш последний npm install , параметр --save-dev означает, что мы хотим добавить эту зависимость к нашим зависимостям разработки, которые нам нужны для нашей среды разработки, но не для производства.
Итак, теперь давайте создадим файл index.js со следующим:
//index.js
import Vue from 'vue';
new Vue({
el: '#container',
data: {
value: 'Hello From Vue Again'
}
});
Следующим шагом является создание файла webpack.config.js, это то, что мы используем, чтобы указать веб-пакету, что он должен делать:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
});
module.exports = {
// This is the "main" file which should include all other modules
entry: './index.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
plugins: [htmlPlugin]
};
Вы можете быть в замешательстве прямо сейчас, но это минимальная настройка веб-пакета, и на самом деле она вполне удобочитаема.
Вверху мы используем плагин HTML, который создаст файл index.html в нашей папке dist, которая будет корнем нашего проекта.
Затем мы говорим, где мы хотим, чтобы webpack запускался в нашем проекте, это файл, в котором мы будем выполнять весь наш импорт, поэтому Webpack соберет все, что нам нужно.
Наконец, мы добавляем rules, что в нашем случае говорит о том, что мы хотим использовать babel для любого файла, заканчивающегося на .js, babel позволяет нам использовать функции ES6, которые не поддерживаются во всех браузерах. В конце мы добавляем псевдоним, который необходим для работы Vue (не спрашивайте меня, почему, я не знаю :/)
Итак, теперь нам нужно перейти к нашему package.json и сделать так, чтобы он соответствовал следующему, я выделил жирным шрифтом все новое, добавленное:
{
"name": "macrotracker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.16"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.3",
"vue-template-compiler": "^2.5.13",
"vue-loader": "^14.1.1"
}
}
Поэтому мы добавили кучу зависимостей для разработчиков, которые помогают нам использовать Vue и Webpack вместе, мы также добавили два полезных скрипта, которые мы можем использовать, чтобы Webpack мог творить для нас свое волшебство.
Теперь мы изменим наш файл index.html, чтобы он выглядел следующим образом:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MacroTracker</title>
</head>
<body>
<div id="container">
{{value}}
</div>
</body>
</html>
Если вы сейчас запустите npm install, а затем npm run start, у вас теперь будет папка dist с файлом index.html, а также с файлом main.js.
Если вы просто перетащите файл index.html в браузер, вы должны увидеть следующее:
Заключение
Хорошо, это был длинный учебник, но мы рассмотрели большинство инструментов для современной веб-разработки на веб-интерфейсе. Стало сложнее? Да, но он также намного мощнее.
Webpack может сбивать с толку, но он предлагает так много, и обычно вы не будете настраивать его вручную, вместо этого вы будете использовать отличный vue cli, который создаст для вас идеальную конфигурацию как для разработки, так и для производства.
Спасибо за чтение, и я надеюсь, что вы узнали что-то.
