Использование Laravel Mix и Es6

Если вы попытаетесь скомпилировать и минимизировать свои js-ассеты, которые, скорее всего, будут иметь некоторые из новых функций js, вы получите ошибку из-за uglifyJs, которые не могут работать с новыми возможностями.

Конфигурация по умолчанию для Laravel mix уже поставляется с предустановками: [‘env’], который охватывает все пресетов babel, но некоторые пакеты по-прежнему используют устаревшие es2015 и т. д., Поэтому обычно вы получаете ошибку

ERROR in ./node_modules/choices.js/assets/scripts/dist/choices.min.js

Module build failed: Error: Couldn’t find preset “es2015” relative to directory “/Project/Root/Path/node_modules/choices.js”

Для решения этой проблемы есть два варианта

• автор пакета обновляет пресет до env
• или установить это

yarn add --dev babel-preset-es2015

способы настройки не требуют каких-либо изменений, однако, если вам все еще нужно изменить используемый пресет, то внутри вашего webpack.mix.js

// BABEL config
mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015'] // default = env
          }
        }
      }
    ]
  }
})

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

// .babelrc at the project root
 
{
  "presets": ["es2015"],
  "plugins": [] // any babel plugins u might need
}

к содержанию ↑

Дополнительный совет

Если вы устали от использования «../../../» в вызове import / require (), спасибо https://moduscreate.com/blog/es6-es2015-import-no-relative- path-webpack / с небольшим дополнением к webpack.mix.js мы можем напрямую импортировать изresources/assets, как боссы.

• webpack.mix.js

// BABEL config
mix.webpackConfig({
  resolve: {
    modules: [
      path.resolve('./resources/assets'),
      path.resolve('./node_modules')
    ]
  }
})

• и теперь вы можете сделать что-то вроде

  import Example from 'js/very/deep/nested/example.js'
   
  // or from vendor
   
  import Example from 'vendor/very/deep/nested/example.js'

к содержанию ↑

Дополнительный совет 2

После обновления vue вы, вероятно, получили ошибку о несоответствующих версиях vue & vue-loader, это связано с laravel mix и поэтому, чтобы исправить это нужно просто запустить

npm remove laravel-mix;npm install laravel-mix --dev --save

который удаляет его, а затем снова устанавливает.

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)