Всем привет!

Да, я знаю, это еще один учебник, целью которого является внедрение модных словечек в современную веб-разработку. Однако нет ни малейшего представления о React, Vue или Angular. Просто старый добрый JavaScript, хоть и ES6.

Я уже некоторое время занимаюсь разработкой и, как и все остальные, иногда нахожу огромное количество технологий, которые сложно уловить с первого взгляда. Я потратил много часов на поиск в Интернете подробных сведений о конкретной новой платформе, библиотеке и т. Д.

Может быть, проблема во мне, но (почти) в каждом уроке, на который я наткнулся в своем путешествии, не хватало какой-то части. Довольно часто мне приходилось читать несколько разных статей на одну и ту же тему, чтобы добраться до долгожданного момента «Агаааа».

Итак, в этой статье я должен предоставить как можно более подробную информацию о запуске проекта, любого проекта с использованием вышеупомянутых технологий.

Редактировать:

К этой статье есть продолжение с обновленными и модернизированными зависимостями:



Среда разработки Javascript с Babel, Webpack, Gulp и ESLint
Полный шаблон для веб-разработки с использованием последних стандартов JavaScript, prettier и eslint для согласованности и… medium .com



Отправная точка

Единственное требование - наличие установленного node.js, просто запустите npm init -y в своем терминале. Это запустит новый проект, пропуская интерактивную программу npm, и напечатает что-то очень похожее в консоли:

{
  "name": "es6-starter-pack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

После этого давайте создадим внутри app папку и начнем со следующей структуры:

app
 - src // where I like to keep all the .js files
 - template // where all the html & css goes
 - assets // where all static files go(sound and images, if any)

Затем создайте gulpfile.js в корневом каталоге проекта. Начнем с его настройки. Gulp - это средство выполнения задач, и по сути, это запускающие задачи, которые мы создаем сами:

// require gulp module
let gulp = require("gulp");
let OUT_DIR = './build';
// create a task to copy static html to the build folder
gulp.task('copy:html', () => gulp.src('./app/template/index.html').pipe(gulp.dest(OUT_DIR)));
// copy css to build folder
gulp.task('copy:css', () => gulp.src('./app/template/style.css').pipe(gulp.dest(OUT_DIR)));
// if any assets are present, copy them to the build folder as well
gulp.task('copy:assets', () => gulp.src('./app/assets/*').pipe(gulp.dest(OUT_DIR + '/assets/')));

По умолчанию мы можем запускать каждую из этих задач одну за другой, например, с gulp copy:html, или мы можем объединить их все в одну задачу, как показано ниже:

gulp.task('default', ['copy:html', 'copy:css', 'copy:assets']);

Это задача, которая будет выполнена, если вы просто запустите gulp внутри папки, где находится gulpfile.js. В нашем случае он выполняет три задачи копирования, перечисленные выше.

Наконец, чтобы он заработал, запустите:

npm install gulp --save-dev

Часть save-dev сообщит проекту, что gulp - это зависимость, необходимая только для целей разработки, необходимая для времени компиляции. Он не будет установлен, если проект создан для производственной среды, что не займет ненужного места на нашем хостинге.

Webpack

Установите webpack с npm install webpack и создайте webpack.config.js снова в корневой папке проекта. Откройте файл конфигурации и поместите в него следующие строки:

const path = require('path');
const outputDir = path.resolve(__dirname, 'build');
module.exports = {
    entry: path.resolve(__dirname, 'app/src'),
    output: {
        path: outputDir,
        filename: 'bundle.js'
    }
};

entrypart сообщает веб-пакету, где находится код, который мы хотим связать, а вывод - это каталог, в который мы хотим его экспортировать. Мы используем модуль узла path, который автоматически разрешает системный путь к папке проекта, независимо от используемой платформы.

Соединение точек

Теперь webpack и gulp могут работать отдельно, но в идеале наша цель - заставить их работать вместе, что также сделает время разработки более продуктивным.

Для этого нам понадобится модуль webpack-stream. Установите его через npm, снова добавив как зависимость разработчика. Затем откройте gulpfile и добавьте следующие модификации:

Сверху загружаем модуль:

let webpack = require('webpack-stream');

Затем создайте следующую задачу и добавьте ее к задаче по умолчанию:

gulp.task('webpack', () => {
return gulp.src('build/')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('build/'));
});
gulp.task('default', ['copy:html', 'copy:css', 'copy:assets', 'webpack']);

С этой задачей мы запускаем webpack, передавая ему конфигурацию, созданную в файле webpack.config.js.

После этого выполнение только команды gulp приведет к:

  1. Скопируйте все статические активы
  2. Скопируйте html и css в папку сборки
  3. Свяжите все скрипты в папке src с файлом bundle.js в файле сборки.

Будущее сегодня

Последняя часть - включить babel, чтобы мы могли воспользоваться преимуществами ES6 и свести его к сегодняшней поддержке всех браузеров.

Для этого нам понадобится 3 пакета:

npm install @babel/core babel-loader @babel/preset-env

После установки нам потребуется внести изменения в конфигурационный файл webpack:

module.exports = {
    entry: path.resolve(__dirname, 'app/src'),
    output: {
        path: outputDir,
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['babel-loader']
        }]
   }
};

Дополнение module использует загрузчик babel и ищет все файлы .js в нашем проекте, за исключением папки node_modules. Все остальное, что соответствует условию регулярного выражения (с расширением .js), будет перенесено.

Последний шаг - снова в корневой папке создайте файл .babelrc и вставьте следующее:

{
    "presets": ["@babel/preset-env"]
}

Это говорит babel, что он должен использовать собственный пресет env, который достаточно умен, чтобы избавить нас от множества полифиллов между браузерами.

Заключение

Со всем этим вы готовы к работе. Полный код из этого руководства можно найти в виде небольшого стартового пакета с небольшими изменениями здесь:



idzhurov / es6-starter-pack
Стартовый пакет для веб-приложения, использующий gulp и webpack для компиляции - idzhurov / es6-starter-pack github. com



Если вы зашли так далеко, я вам полностью признателен. Кроме того, я должен признаться - я в основном использую это для начала игр. Я считаю этот подход очень полезным при запуске проекта, в котором существуют ограничения по размеру. Таким образом, у меня есть свобода включать все, что мне нужно, если мне это нужно.

Я хотел бы услышать любые отзывы об учебнике, стеке или моих произведениях в целом. Дайте мне знать, если вы хотите, чтобы я продолжал в том же духе (у меня есть несколько проектов для начинающих игр, и я также могу преобразовать их в учебные пособия).