В настоящее время основные браузеры в основном все поддерживают новые возможности ES6. Среди них браузеры Chrome и Firefox наиболее дружелюбны к новым возможностям ES6. IE7~11 практически не поддерживает ES6.

Ниже приведены статус поддержки и время начала в основных браузерах:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Январь 2017 Август 2016 Март 2017 Июль 2016 Август 2018

Примеры

var a = 2; { let a = 3; document.write(a); // 3 } document.write('<br>'); document.write(a); // 2

Попробуйте »

Подробную информацию о поддержке браузерами можно найти по адресу:http://kangax.github.io/compat-table/es6/

Node.js — это JavaScript, выполняемый на стороне сервера, и он имеет более высокую поддержку ES6. Если вы ещё не знакомы с Node.js, можете прочитать нашУчебник по Node.js。

Для установки Node.js можно обратиться кУстановка и настройка Node.js。

Запуск ES6 в среде Node.js

$ node
> let sitename="example"
undefined
> console.log(sitename)
example
undefined
>

Используйте следующую команду, чтобы просмотреть возможности ES6, уже реализованные в Node.

node --v8-options | grep harmony

webpack

webpack — это сборщик статических модулей для современных приложений JavaScript. Когда webpack обрабатывает приложение, он рекурсивно строит граф зависимостей, содержащий все модули, необходимые приложению, а затем объединяет все эти модули в один или несколько бандлов.

webpack имеет четыре основные концепции:

  • Точка входа (entry)
  • Вывод (output)
  • loader
  • Плагины (plugins)

Точка входа (entry)

Свойство entry указывает, какой модуль webpack должен использовать в качестве начальной точки для построения своего внутреннего графа зависимостей. После указания точки входа webpack определит, какие модули и библиотеки (прямо и косвенно) зависят от неё. В webpack есть несколько способов определить entry, как в следующих примерах:

Синтаксис с одной точкой входа (сокращённая запись):

const config = {
  entry: "./src/main.js"
}

Синтаксис объекта:

const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

Вывод (output):

Свойство output указывает webpack, куда выводить создаваемые им бандлы и как называть эти файлы. Значение по умолчанию — ./dist:

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  }
}

loader

Загрузчики позволяют webpack обрабатывать файлы, не являющиеся JavaScript (сам webpack понимает только JavaScript). Загрузчики могут преобразовывать все типы файлов в модули, которые webpack может эффективно обрабатывать. Например, при использовании ES6 во время разработки используйте загрузчики для преобразования синтаксиса ES6 в ES5, как показано в конфигурации ниже:

const config = { entry: "./src/main.js", output: { filename: "bundle.js", path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: [ presets: ["env"] ] } ] } }

Плагины (plugins)

Загрузчики используются для преобразования определённых типов модулей, тогда как плагины могут делать гораздо больше. Это включает оптимизацию бандла, сжатие, определение переменных окружения и так далее. Плагины мощны и являются очень важным инструментом для расширения webpack, и могут использоваться для решения различных задач. Использовать плагин также очень просто — просто require() его, а затем добавить его в массив plugins.

//Установка через npm const HtmlWebpackPlugin = require('html-webpack-plugin'); //Используется для доступа к встроенным плагинам const webpack = require('webpack'); const config = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };

Создание приложений с помощью webpack

webpack.config.js

const path = require('path'); module.exports = { mode: "development", // "production" | "development" //Выберите development для режима разработки, а production для production-режима entry: "./src/main.js", output: { filename: "bundle.js", path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: [ presets: ["env"] ] } ] }, plugins: [ ... ] }

Приведённый выше пример создаёт самую простую конфигурацию. webpack будет собирать, начиная с entry-файла main.js, выполнять преобразование JS через loaders и выводить файл с именем bundle.js. На этом весь процесс завершён.

gulp

gulp — это потоковый инструмент автоматизированной сборки. Он отличается простотой использования, быстрой сборкой, качественными плагинами и лёгкостью изучения, и часто используется в лёгких проектах.

Как использовать?

Установите gulp глобально:

$ npm install --global gulp

Добавьте зависимости в проект:

$ npm install --save-dev gulp

Создайте файл с именем gulpfile.js в корневом каталоге проекта:

const gulp = require('gulp');

// default 表示一个任务名，为默认执行任务
gulp.task('default', function() {
  // 放置默认的任务代码
})

Запустите gulp:

$ gulp

Сборка приложений с помощью gulp

const gulp = require('gulp'); const uglify = require("gulp-uglify"); gulp.task('default', function() { gulp.src('./src/main.js') .pipe(uglify()) .pipe(gulp.dest('./dist')); })

Справочные статьи