Невозможно скомпилировать Vue.js для IE 11 - PullRequest
Новая
       15

Невозможно скомпилировать Vue.js для IE 11

0 голосов
/ 19 октября 2018

Итак, я недавно задал вопрос об этом здесь , и после долгих поисков и поисков вот что у меня есть для моего babel.rc: 

{
  "presets": [["env", {
    "modules": false,
    "uglify": true,
    "targets": {
      "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
    }
  }],
  "vue",
  "vue-app",
  "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"]
}

И этовот что у меня есть для моего веб-пакета: 

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

var npm = '/node_modules/';

var paths = {
  'jquery-ui': npm + 'jquery-ui/',
  'bootstrap': npm + 'bootstrap/',
  'select2': npm + 'select2/dist/',
  'lightbox2': npm + 'lightbox2/dist/',
  'accounting': npm + 'accounting/',
  'polly-fill': npm + '@babel/polyfill/dist/',
};

var jQueryUITheme = 'ui-lightness';

mix.less('resources/assets/less/style.less', 'public/css/', {
  modifyVars: {
    'bootstrap': '"' + path.resolve(__dirname) + paths['bootstrap'] + 'less/' + '"'
  }
}).js('resources/assets/js/boot.js', 'public/js/all.js').webpackConfig({
  resolve: {
    alias: {
      "matches-selector/matches-selector": "desandro-matches-selector",
      "eventEmitter/EventEmitter": "wolfy87-eventemitter",
      "get-style-property/get-style-property": "desandro-get-style-property",
      'masonry': 'masonry-layout',
      'isotope': 'isotope-layout',
      'isotope/js/layout-mode': 'isotope-layout/js/layoutmode',
      'pace': 'pace-progress',
      "jquery-ui/ui/widget": "jquery-ui/widget.js",
    }
  },
}).js('resources/assets/js/vue/main.js', 'public/js/vue.js')
  .scripts([
    'resources/assets/js/lib/jquery.validate.min.js',
    'resources/assets/js/lib/jquery.bootstrap.wizard.min.js',
    path.resolve(__dirname) + paths['accounting'] + 'accounting.js'
  ], 'public/js/genesis.js')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/jquery-ui.min.css', 'public/css/lib/jquery-ui/jquery-ui.min.css')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/theme.css', 'public/css/lib/jquery-ui/theme.css')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/images', 'public/css/lib/jquery-ui/images')
  .copy(path.resolve(__dirname) + paths['select2'] + 'css/select2.min.css', 'public/css/lib/select2/select2.min.css')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'css/lightbox.min.css', 'public/css/lib/lightbox2/css')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/loading.gif', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/close.png', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/next.png', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/prev.png', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['polly-fill'] + 'polyfill.min.js', 'public/js/')
  .copy(path.resolve(__dirname) + '/resources/assets/js/lib/pace.js', 'public/js/')
  .sourceMaps();

 mix.babel(['public/js/main.js'], 'public/js/main.js');
 mix.babel(['public/js/vue.js'], 'public/js/vue.js');
 mix.minify(['public/js/main.js', 'public/js/vue.js', 'public/css/style.css']);

I Понимаю, т.е. 11 ни в коем случае не поддерживает что-либо выше es5 , хотя My vue JS все еще не компилируется в ES5,Вывод из моего последнего вопроса остается прежним.Я запутался в том, как скомпилировать Vue JS для ES5 так, чтобы я не получил следующее:

Ошибка: 

SCRIPT1002: Syntax error
vue.js (16,8498)

Хорошо, так что с этой строкой? 

(module,__webpack_exports__,__webpack_require__){"use strict";eval("/* unused harmony export getJSON */\n/* unused harmony export getScrollBarWidth */\n/* unused harmony export translations */\n/* harmony export (immutable) */ __webpack_exports__[\"b\"] = delayer;\n/* unused harmony export VueFixer */\n// coerce convert som types of data into another type\nconst coerce = {\n  // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning.\n  boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val),\n  // Attempt to convert a string value to a Number. Otherwise, return 0.\n  number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined || val === null || isNaN(Number(val)) ? alt :

Я не уверен, какую версию веб-пакета я использую, поскольку использую Laravel Mix, но я использую babel 6.

все компилируется нормально,но Vue JS все еще не компилируется должным образом до ES5 для IE 11.

1 Ответ

0 голосов
/ 19 октября 2018

number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined..... внутри кода вашего пакета говорит мне, что функции стрелок не были преобразованы в обычные функции.Попробуйте добавить transform-es2015-arrow-functions Babel плагин.Если вы по-прежнему будете сталкиваться с подобными ошибками - попробуйте проанализировать код вашего пакета и выясните, какие функции ES6, не поддерживаемые IE11 , остаются там.

...