Рубрики
Без рубрики

Jargon-Free WebPack Intro для пользователей Vuejs

Уэбпак обещает отличные вещи для Vue разработчиков. Но диапазон возможностей WebPack также так же, почему он так запугивает, чтобы учиться. В этой статье я дам вам нежное введение в учебный пакет без жаргона, который может вы понижены с толку.

Автор оригинала: Anthony Gore.

Для многих разработчиков Vue.js – первая внешняя структура JavaScript, которую они узнали. Если это правда для вас, у вас, вероятно, не было причины узнать WebPack еще. Но когда вы продолжите с Vue, вы увидите, что WebPack появится снова и снова в документации, пример проектов и в отношении инструментов, таких как Vue CLI.

WebPack обещает отличные вещи для пользователей Vue:

  • Автоматизированный процесс разработки, который делает кодирование ветером
  • Мир удобных функций развития, такие как Vuue любимые одноположные компоненты
  • Оптимизация для вашего кода, чтобы сделать его быстрым и худой

Но диапазон возможностей WebPack также так, как это так запугано. Похоже, что так много вещей, которые трудно понять, что это действительно это Отказ

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

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/12/04.

Пример проекта

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

app.js.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }  
});

index.html.





  
  Vue.js Project


  
{{ message }}

Зависимости

История Webpack начинается с некоторых наблюдений о том, как зависимости JavaScript управляются в документе HTML. «Зависимости» я имею в виду сторонние библиотеки, такие как Vue, jQuery или Lodash, или даже другие файлы сценариев с вашей собственной базы кода.

На самом деле, нет реального способа управления зависимостями в HTML-документе, отличном от того, чтобы убедиться, что любые общие функции и переменные имеют глобальный объем, и что скрипты загружаются в правильном порядке.

Например, поскольку Vue.js Определяет глобальную Vue Объект и загружен первым, мы можем использовать Vue объект в нашем app.js скрипт Если один из этих условий не был выполнен, скрипт сломался. Рассмотрим следующее, где мы пытаемся использовать Vue До его нагрузки:



В комплексном веб-приложении эта система недостаточна, потому что:

  • Глобальные переменные вводят возможности именования столкновений
  • Загрузка скрипта загрузки является хрупким и может быть легко сломанным, поскольку приложение растет
  • Оптимизация производительности, как нагрузочные сценарии асинхронно, не могут быть использованы

Модули

Решение проблемы управления зависимостями является использование Модульная система где код модульзен и импортируется в другие скрипты. За прошедшие годы были разрабатываются несколько различных систем модулей JavaScript, но ES модули Это система, которая в настоящее время включена в стандарт JavaScript.

Вот простой пример модулей ES:

modulea.js.

export default function(value) {
  return value * 2;
}

moduleb.js.js.

import multiplyByTwo from './moduleA';
console.log(multiplyBy2(2));
// 4

Можем ли мы сделать Vue.js модуль и избежать обсуждаемых проблем? Да! Файл сценария Vue.js, который используется непосредственно в браузере, является лишь одним из доступных сборки Vue. Существует также сборка модуля ES с именем vue.esm.browser.js Что можно использовать в нашем примере проекта, как это:

app.js.

import Vue from './vue.esm.browser.js';

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }  
});

Заказ скрипта не проблема, поскольку компилятор знает, что он должен ждать, пока vue.esm.browser.js доступен до того, как он может работать. Глобальные переменные не нужны, потому что модули ссылаются на имя файла.

Проблема в том, что модули ES не поддерживаются в браузерах. На самом деле, до нескольких месяцев назад, он не поддерживал в любой браузер.

Если мы хотим использовать модули ES или любой другой модуль JavaScript, нам нужно будет разрешить код в то, что можно надежно использовать в браузере. Введите WebPack.

Пакет

WebPack – это инструмент Node.js, который запускается в автономном режиме в вашей среде разработки. WebPack позволяет разрешать модули JavaScript в дружественный браузер код в процессе, называемом «объединением».

Бандарь начинается с «входного файла». WebPack анализирует файл ввода, чтобы найти какие-либо зависимости. В примере проекта app.js это входной файл и имеет только одну зависимость, vue.js. В большинстве проектов будет еще много.

Затем WebPack анализирует зависимости, чтобы найти какие-либо зависимости, которые они могут иметь. Этот процесс продолжается до тех пор, пока не найдены все зависимости проекта.

Результатом является График зависимостей. Для примера проекта график включает app.js , Vue.js И несколько других зависимостей, требуемых WebPack.

wtf_webpack_01.png.

WebPack использует этот график в качестве чертежа для объединения всего кода в один файл для браузера.

В примере проекта файл Bundle заменит отдельные файлы сценариев Vue.js и app.js В документе HTML:

index.html.





  
  Vue.js Project


  
{{ message }}

Погрузчики

WebPack предоставляет надежное решение проблемы управления зависимостью JavaScript. Из этого основания другой мощный появляется например Погрузчики Отказ

Погрузчики позволяют WebPack преобразовать файл до того, как он подключен. Например, WebPack Babel Loader преобразует синтаксис JavaScript следующего поколения, как ES2015 на стандарт ES5. Это позволяет разработчикам написать свой код с использованием современных функций, но все еще обеспечивает поддержку в старых браузерах.

Например, в app.js Мы используем ES2015 Const , который не поддерживается IE10:

app.js.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }  
});

Если используется WebPack Babel Loader Const будет преобразован в var прежде чем он добавлен в пучок:

bundle.js.

...

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }  
});

...

Есть много других погрузчиков, в том числе:

  • CSS-погрузчик
  • Sass Loader
  • TeampStry Loader
  • Vue Loader (для компонентов одно файловых)

Бегущий веб-папак

WebPack использует декларативный файл конфигурации для описания каждого аспекта сборки. Эти файлы конфигурации являются новеренно длинными и сложными, но для простого проекта вы сможете получить гист:

webpack.config.js.

module.exports = {
  // Entry file
  entry: './app.js',
  output: {
    // Output bundle
    filename: 'bundle.js'
  }, 
  module: {
    rules: [
      {
        // For .js files...
        test: /\.js$/,
        use: {
          // Use the Babel loader
          loader: 'babel-loader'
        }
      }
    ]
  },
  resolve: {
    alias: {
      // Ensure the right Vue build is used
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};

С созданным файлом конфигурации WebPack затем может быть запущен с командой CLI:

$ webpack

Как работает WebPack, он выводит статистику о сборке в терминале. Многие из этих статистичны не будут иметь смысла прямо сейчас, но вы можете хотя бы видеть, что эта сборка заняла около трех секунд, чтобы завершить и выходной файл, bundle.js 299 кб.

wtf_webpack_02.png.png.

Следующий шаг

Эта статья не очень давала вас в обучении WebPack, но цель состояла в том, чтобы дать вам фон, я думаю, что отсутствует от официальных документов и других руководств.

Большая вынос я надеюсь, что вы получили это так WebPack – это в первую очередь модуль Bundler Отказ Все другие функции WebPack появляются из этой базовой модели. Для следующего шага я рекомендую вам пройти Концепции Раздел документов WebPack:

https://webpack.js.org/concepts/

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше