Vue 2.x + Laravel 5.4不在资源管理器中工作

Question

我正在编写一个用Laravel5.4和Vue 2+ Yarn编写的项目，我在IE中得到了以下JS错误(版本9-11)

1. 语法错误(在const函数和箭头函数中使用的行)
2. 对象不支持属性或方法“startsWith”

我错过了什么？我想知道我是不是在滥用babel，或者其他的东西不见了。我在这里非常沮丧，因为我已经花了那么多时间弄清楚为什么在IE中没有任何东西在涉及Vue 2组件的情况下正常工作。如有任何帮助或建议，我们将不胜感激！

app.js：

require('./bootstrap');

var Promise = require('es6-promise').Promise;
require('babel-polyfill')
Promise.polyfill();
window.Vue = require('vue');
import Vue2Filters from 'vue2-filters'
import BootstrapVue from 'bootstrap-vue'

我的webpack.mix.js (试图安装babel)

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .babel('out.es6.js', 'out.js')
    .options({
        polyfills: [
            'Promise'
    ]
});

我的package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "build": "babel src -d lib"
    },
    "devDependencies": {
        "accounting": "^0.4.1",
        "axios": "^0.15.3",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-vue-app": "^1.3.1",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^3.2.3",
        "jquery": "^3.1.1",
        "laravel-mix": "0.*",
        "lodash": "^4.17.4",
        "vue": "^2.4.2",
        "vue-template-compiler": "^2.4.2",
        "webpack": "^3.8.1"
    },
    "dependencies": {
        "bootstrap-vue": "^1.0.0-beta.7",
        "es6-promise": "^4.1.1",
        "vee-validate": "^2.0.0-beta.17",
        "vue-events": "^3.0.1",
        "vue-strap": "^1.1.37",
        "vue2-filters": "^0.1.9",
        "vuelidate": "^0.5.0"
    }
}

Answer 1

我通过运行babel代码成功地解决了这个问题，并将结果回显到特定位置：

我的.bashrc：

{
    "presets": ["es2015"]
}

命令：

./node_modules/.bin/babel public/js/app.js > public/js/out.js

然后，在布局文件中，我包含了public/js/out.js文件，而不是public/js/app.js文件。