Как собрать es6 бандл в Laravel-mix или в Webpack?

Для сборки ES6 бандла в Laravel Mix или в Webpack, вам понадобится выполнить несколько шагов.

1. Установите необходимые зависимости:
Убедитесь, что у вас установлен Laravel Mix или Webpack, а также все необходимые плагины и загрузчики, чтобы обрабатывать ES6 код.
Выполните команду npm install --save-dev laravel-mix или npm install --save-dev webpack для установки Laravel Mix или Webpack, соответственно.
Для обработки ES6 кода, необходимы следующие плагины и загрузчики:
- babel-loader: используется для загрузки и обработки файлов ES6
- @babel/core: основная часть Babel, используется для транспиляции кода ES6 в код предыдущих стандартов JavaScript
- @babel/preset-env: набор плагинов Babel, используется для транспиляции кода ES6 в код определенной версии JavaScript

Установите эти пакеты, выполнив команду npm install --save-dev babel-loader @babel/core @babel/preset-env.

2. Настройте конфигурацию Laravel Mix или Webpack:
- Для Laravel Mix:
Создайте файл webpack.mix.js в корне проекта и добавьте следующий код:

  let mix = require('laravel-mix');

  // Компиляция файлов JavaScript
  mix.js('resources/js/app.js', 'public/js');

  // Добавьте любые другие необходимые настройки для компиляции ваших ресурсов
  // ...

В этом примере предполагается, что ваш ES6 код находится в файле resources/js/app.js и собранный бандл будет сохранен в директорию public/js.

- Для Webpack:
Создайте файл webpack.config.js в корне проекта и добавьте следующий код:

  module.exports = {
    entry: './app.js',
    output: {
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  };

Этот пример предполагает, что ваш ES6 код находится в файле app.js и собранный бандл будет сохранен в файл bundle.js.

3. Создайте файл .babelrc для настройки Babel:
Создайте файл .babelrc в корне проекта и добавьте следующий код:

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

Этот конфигурационный файл указывает Babel использовать @babel/preset-env для транспиляции кода ES6 в код предыдущих стандартов JavaScript.

4. Теперь вы можете собрать бандл, выполнив команду для Laravel Mix npm run dev или для Webpack npx webpack. В результате, вам будет доступен собранный бандл ES6 кода.

Вот и все! Теперь вы можете собрать ES6 бандл в Laravel Mix или Webpack, используя описанные выше шаги. Это позволит вам использовать самые современные возможности языка JavaScript и обеспечить совместимость с более старыми браузерами.