Vue js vuecli3 приложение не работает в ie11 (babel не загружает polyfills?) - PullRequest
0 голосов
/ 06 октября 2018

Проблема в том, что мое приложение не работает в IE11. Я использую vue-cli3 с babel polyfill 7 (со списком браузеров в package.json) в IE11. Я получаю белый экран с ошибкой 1003 в консоли expected ':'

Когда я пытаюсь выполнить команду npx browserSlist, я вижу, что IE11 работает так:)

my babel.conf: (я изменил предустановку @vue ... по умолчанию на@ babel / preset-env, так что отладка: правда сработала)

module.exports = {
    'presets': [
        [
            '@babel/preset-env',
            {
                'useBuiltIns': 'entry'
            },
        ],
    ],
};

часть списка браузера в моем package.json:

"browserslist": [
    "last 1 version",
    "> 1%",
    "not dead",
    "ie 11"
]

Журнал:

C:\Users\ricar\Projects\event-entrance-system-frontend>npx browserSlist
and_chr 69
and_ff 62
and_qq 1.2
and_uc 11.8
android 67
baidu 7.12
chrome 69
chrome 68
chrome 67
edge 17
firefox 62
firefox 61
ie 11
ie_mob 11
ios_saf 11.3-11.4
ios_saf 11.0-11.2
op_mini all
op_mob 46
opera 55
safari 12
safari 11.1
samsung 7.2

C:\Users\ricar\Projects\event-entrance-system-frontend>npm run serve

> update@0.1.0 serve C:\Users\ricar\Projects\event-entrance-system-frontend
> vue-cli-service serve

 INFO  Starting development server...
 11% building modules 9/11 modules 2 active ...system-frontend\node_modules\url\url.js@babel/preset-env: `DEBUG` option

Using targets:
{
  "android": "67",
  "chrome": "67",
  "edge": "17",
  "firefox": "61",
  "ie": "11",
  "ios": "11",
  "safari": "11.1"
}

Using modules transform: commonjs

Using plugins:
  transform-template-literals { "android":"67", "ie":"11" }
  transform-literals { "android":"67", "ie":"11" }
  transform-function-name { "android":"67", "edge":"17", "ie":"11" }
  transform-arrow-functions { "android":"67", "ie":"11" }
  transform-block-scoped-functions { "android":"67" }
  transform-classes { "android":"67", "ie":"11" }
  transform-object-super { "android":"67", "ie":"11" }
  transform-shorthand-properties { "android":"67", "ie":"11" }
  transform-duplicate-keys { "android":"67", "ie":"11" }
  transform-computed-properties { "android":"67", "ie":"11" }
  transform-for-of { "android":"67", "ie":"11" }
  transform-sticky-regex { "android":"67", "ie":"11" }
  transform-unicode-regex { "android":"67", "ie":"11" }
  transform-spread { "android":"67", "ie":"11" }
  transform-parameters { "android":"67", "ie":"11" }
  transform-destructuring { "android":"67", "edge":"17", "ie":"11" }
  transform-block-scoping { "android":"67", "ie":"11" }
  transform-typeof-symbol { "android":"67", "ie":"11" }
  transform-new-target { "android":"67", "ie":"11" }
  transform-regenerator { "android":"67", "ie":"11" }
  transform-exponentiation-operator { "android":"67", "ie":"11" }
  transform-async-to-generator { "android":"67", "ie":"11" }
  proposal-async-generator-functions { "android":"67", "edge":"17", "ie":"11", "ios":"11", "safari":"11.1" }
  proposal-object-rest-spread { "android":"67", "edge":"17", "ie":"11", "ios":"11" }
  proposal-unicode-property-regex { "android":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11" }
  transform-dotall-regex { "android":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11" }

Using polyfills with `entry` option:

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\main.js] Replaced `@babel/polyfill` with the following polyfills:
  es6.array.copy-within { "android":"67", "ie":"11" }
  es6.array.fill { "android":"67", "ie":"11" }
  es6.array.find { "android":"67", "ie":"11" }
  es6.array.find-index { "android":"67", "ie":"11" }
  es6.array.from { "android":"67", "ie":"11" }
  es7.array.includes { "android":"67", "ie":"11" }
  es6.array.iterator { "android":"67", "ie":"11" }
  es6.array.of { "android":"67", "ie":"11" }
  es6.array.sort { "android":"67" }
  es6.array.species { "android":"67", "ie":"11" }
  es6.date.to-primitive { "android":"67", "ie":"11" }
  es6.function.has-instance { "android":"67", "ie":"11" }
  es6.function.name { "ie":"11" }
  es6.map { "android":"67", "ie":"11" }
  es6.math.acosh { "android":"67", "ie":"11" }
  es6.math.asinh { "android":"67", "ie":"11" }
  es6.math.atanh { "android":"67", "ie":"11" }
  es6.math.cbrt { "android":"67", "ie":"11" }
  es6.math.clz32 { "android":"67", "ie":"11" }
  es6.math.cosh { "android":"67", "ie":"11" }
  es6.math.expm1 { "android":"67", "ie":"11" }
  es6.math.fround { "android":"67", "ie":"11" }
  es6.math.hypot { "android":"67", "ie":"11" }
  es6.math.imul { "ie":"11" }
  es6.math.log1p { "android":"67", "ie":"11" }
  es6.math.log10 { "android":"67", "ie":"11" }
  es6.math.log2 { "android":"67", "ie":"11" }
  es6.math.sign { "android":"67", "ie":"11" }
  es6.math.sinh { "android":"67", "ie":"11" }
  es6.math.tanh { "android":"67", "ie":"11" }
  es6.math.trunc { "android":"67", "ie":"11" }
  es6.number.constructor { "android":"67", "ie":"11" }
  es6.number.epsilon { "android":"67", "ie":"11" }
  es6.number.is-finite { "ie":"11" }
  es6.number.is-integer { "android":"67", "ie":"11" }
  es6.number.is-nan { "ie":"11" }
  es6.number.is-safe-integer { "android":"67", "ie":"11" }
  es6.number.max-safe-integer { "android":"67", "ie":"11" }
  es6.number.min-safe-integer { "android":"67", "ie":"11" }
  es6.number.parse-float { "android":"67", "ie":"11" }
  es6.number.parse-int { "android":"67", "ie":"11" }
  es6.object.assign { "android":"67", "ie":"11" }
  es7.object.define-getter { "android":"67", "ie":"11" }
  es7.object.define-setter { "android":"67", "ie":"11" }
  es7.object.entries { "android":"67", "ie":"11" }
  es6.object.freeze { "android":"67", "ie":"11" }
  es6.object.get-own-property-descriptor { "android":"67", "ie":"11" }
  es7.object.get-own-property-descriptors { "android":"67", "ie":"11" }
  es6.object.get-own-property-names { "android":"67", "ie":"11" }
  es6.object.get-prototype-of { "android":"67", "ie":"11" }
  es7.object.lookup-getter { "android":"67", "edge":"17", "ie":"11" }
  es7.object.lookup-setter { "android":"67", "edge":"17", "ie":"11" }
  es6.object.prevent-extensions { "android":"67", "ie":"11" }
  es6.object.is { "ie":"11" }
  es6.object.is-frozen { "android":"67", "ie":"11" }
  es6.object.is-sealed { "android":"67", "ie":"11" }
  es6.object.is-extensible { "android":"67", "ie":"11" }
  es6.object.keys { "android":"67", "ie":"11" }
  es6.object.seal { "android":"67", "ie":"11" }
  es6.object.set-prototype-of { "android":"67" }
  es7.object.values { "android":"67", "ie":"11" }
  es6.promise { "android":"67", "ie":"11" }
  es7.promise.finally { "android":"67", "edge":"17", "ie":"11", "ios":"11" }
  es6.reflect.apply { "android":"67", "ie":"11" }
  es6.reflect.construct { "android":"67", "ie":"11" }
  es6.reflect.define-property { "android":"67", "ie":"11" }
  es6.reflect.delete-property { "android":"67", "ie":"11" }
  es6.reflect.get { "android":"67", "ie":"11" }
  es6.reflect.get-own-property-descriptor { "android":"67", "ie":"11" }
  es6.reflect.get-prototype-of { "android":"67", "ie":"11" }
  es6.reflect.has { "android":"67", "ie":"11" }
  es6.reflect.is-extensible { "android":"67", "ie":"11" }
  es6.reflect.own-keys { "android":"67", "ie":"11" }
  es6.reflect.prevent-extensions { "android":"67", "ie":"11" }
  es6.reflect.set { "android":"67", "ie":"11" }
  es6.reflect.set-prototype-of { "android":"67", "ie":"11" }
  es6.regexp.constructor { "android":"67", "edge":"17", "ie":"11" }
  es6.regexp.flags { "android":"67", "edge":"17", "ie":"11" }
  es6.regexp.match { "android":"67", "edge":"17", "ie":"11" }
  es6.regexp.replace { "android":"67", "edge":"17", "ie":"11" }
  es6.regexp.split { "android":"67", "edge":"17", "ie":"11" }
  es6.regexp.search { "android":"67", "edge":"17", "ie":"11" }
  es6.regexp.to-string { "android":"67", "edge":"17", "ie":"11" }
  es6.set { "android":"67", "ie":"11" }
  es6.symbol { "android":"67", "edge":"17", "ie":"11" }
  es7.symbol.async-iterator { "android":"67", "edge":"17", "ie":"11", "ios":"11", "safari":"11.1" }
  es6.string.anchor { "ie":"11" }
  es6.string.big { "ie":"11" }
  es6.string.blink { "ie":"11" }
  es6.string.bold { "ie":"11" }
  es6.string.code-point-at { "android":"67", "ie":"11" }
  es6.string.ends-with { "android":"67", "ie":"11" }
  es6.string.fixed { "ie":"11" }
  es6.string.fontcolor { "ie":"11" }
  es6.string.fontsize { "ie":"11" }
  es6.string.from-code-point { "android":"67", "ie":"11" }
  es6.string.includes { "android":"67", "ie":"11" }
  es6.string.italics { "ie":"11" }
  es6.string.link { "ie":"11" }
  es7.string.pad-start { "android":"67", "ie":"11" }
  es7.string.pad-end { "android":"67", "ie":"11" }
  es6.string.raw { "android":"67", "ie":"11" }
  es6.string.repeat { "android":"67", "ie":"11" }
  es6.string.small { "ie":"11" }
  es6.string.starts-with { "android":"67", "ie":"11" }
  es6.string.strike { "ie":"11" }
  es6.string.sub { "ie":"11" }
  es6.string.sup { "ie":"11" }
  es6.typed.array-buffer { "android":"67", "ie":"11" }
  es6.typed.int8-array { "android":"67", "ie":"11" }
  es6.typed.uint8-array { "android":"67", "ie":"11" }
  es6.typed.uint8-clamped-array { "android":"67", "ie":"11" }
  es6.typed.int16-array { "android":"67", "ie":"11" }
  es6.typed.uint16-array { "android":"67", "ie":"11" }
  es6.typed.int32-array { "android":"67", "ie":"11" }
  es6.typed.uint32-array { "android":"67", "ie":"11" }
  es6.typed.float32-array { "android":"67", "ie":"11" }
  es6.typed.float64-array { "android":"67", "ie":"11" }
  es6.weak-map { "android":"67", "ie":"11" }
  es6.weak-set { "android":"67", "ie":"11" }
  web.timers { "android":"67", "chrome":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11", "safari":"11.1" }
  web.immediate { "android":"67", "chrome":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11", "safari":"11.1" }
  web.dom.iterable { "android":"67", "chrome":"67", "edge":"17", "firefox":"61", "ie":"11", "ios":"11", "safari":"1 36% building modules 222/262 modules 40 active ...ontend\node_modules\moment\locale\s
r.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\API.js] `import '@babel/polyfill'` was not found.   39% building modules 248/279 modules 31 active ...end\node_modules\moment\locale\nl-be.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\registerServiceWorker.js] `import '@babel/polyfill' 40% building modules 251/280 modules 29 active ...ontend\node_modules\moment\locale\ne.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\store.js] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\router.js] `import '@babel/polyfill'` was not found 42% building modules 273/310 modules 37 active ...ontend\node_modules\moment\locale\it.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\plugins\vuetify.js] `import '@babel/polyfill'` was  64% building modules 452/502 modules 50 active ...odules\vue-hot-reload-api\dist\index.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\App.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\node_modules\@kingscode\vuetify-resource\VuetifyResourc 65% building modules 486/527 modules 41 active ...dules\vue-router\dist\vue-router.esm.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Credentials.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Statistics.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Layouts.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\ExcelImport.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\AutomaticImport.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Scanpoints.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Users.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Events.vue] `import '@babel/polyfill'`  65% building modules 492/529 modules 37 active ...nce-system-frontend\src\ResourceText.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\templates\Template.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\templates\AdminTemplate.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\templates\AuthTemplate.vue] `import '@ba 65% building modules 549/592 modules 43 active ...resource\components\ActivityOverlay.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\ResourceText.js] `import '@babel/polyfill'` was not 65% building modules 549/595 modules 46 active ...frontend\src\views\admin\forms\User.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Error404.vue] `import '@babel/polyfill'` was  65% building modules 554/601 modules 47 active ...dex=0&id=03eaa72b&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Error403.vue] `import '@babel/polyfill'` was  64% building modules 557/608 modules 51 active ...ode_modules\axios\lib\helpers\spread.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Settings.vue] `import '@babel/polyfill'` was  64% building modules 563/618 modules 55 active ...dex=0&id=9243dba0&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Scanner.vue] `import '@babel/polyfill'` was n 64% building modules 568/628 modules 60 active ...c\views\admin\forms\AutomaticImport.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Register.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Statistics.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Inventation.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\Login.vue] `import '@babel/polyfill'` was not 64% building modules 570/632 modules 62 active ...lateLoader.vue?vue&type=script&lang=js&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\templates\PromoTemplate.vue] `import '@b 64% building modules 571/634 modules 63 active ...&type=template&id=58fcbf25&scoped=true&
[C:\Users\ricar\Projects\event-entrance-system-frontend\node_modules\@kingscode\vuetify-resource\components\Act 64% building modules 573/635 modules 62 active ...nd\src\components\EventAutocomplete.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\mixins\getEvent.js] `import '@babel/polyfill'` was  66% building modules 601/642 modules 41 active ...dex=0&id=2d35bc88&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Event.vue] `import '@babel/polyfi 65% building modules 613/663 modules 50 active ...dex=0&id=dc18dd6e&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\User.vue] `import '@babel/polyfil 65% building modules 617/670 modules 53 active ...dex=0&id=14d57674&scoped=true&lang=css&
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\TemplateLoader.vue] `import '@babel/polyfill'` was  66% building modules 639/683 modules 44 active ...dules\node-libs-browser\mock\process.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\Resource.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Credential.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Layout.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Scanpoint.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\AutomaticImport.vue] `import '@ba 66% building modules 643/683 modules 40 active ...dules\node-libs-browser\mock\process.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\EventAutocomplete.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\mixins\getSetting.js] `import '@babel/polyfill'` wa 68% building modules 711/733 modules 22 active ..._modules\axios\lib\core\enhanceError.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\scanner\CameraAccessScanner.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\scanner\KeyboardAccessScanner.vue] `import '@babel/polyfill'` was not found.

[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\scanner\PointOfSaleScanner.vue] `import  68% building modules 715/734 modules 19 active ...src\components\importTypes\paylogic.vue
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\views\admin\forms\Form.vue] `import '@babel/polyfil 68% building modules 765/784 modules 19 active ...tawesome-free\webfonts\fa-solid-900.svg
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\importTypes\paylogic.vue] `import '@babe 68% building modules 788/802 modules 14 active ...node_modules\jsbarcode\bin\JsBarcode.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\scanner\AccessScanner.vue] `import '@bab 69% building modules 791/802 modules 11 active ...node_modules\jsbarcode\bin\JsBarcode.js
[C:\Users\ricar\Projects\event-entrance-system-frontend\src\components\CameraBarcodeScanner.vue] `import '@babe 98% after emitting CopyPlugin

 WARNING  Compiled with 1 warnings                                                                                                                                                               19:32:33

 warning  in ./src/views/Statistics.vue?vue&type=template&id=6f2a995d&scoped=true&

Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) <v-list-tile v-for="statistic in statistics">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key f
or more info.

 @ ./src/views/Statistics.vue?vue&type=template&id=6f2a995d&scoped=true& 1:0-402 1:0-402
 @ ./src/views/Statistics.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.178.161:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.178.161:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

1 Ответ

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

Проблема была в плагине, который не совместим с es2015.Раньше (вероятно, с vue cli2) webpack, вероятно, был настроен для переноса всех узлов node_modules, что не обязательно является обычной практикой.

В этом блоге вы можете прочитать, как публиковать код es6 в npm

https://xebia.com/blog/publishing-es6-code-to-npm/

...