Сбой сборки Webpack для IE (11) - PullRequest
Новая
       125

Сбой сборки Webpack для IE (11)

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

Попытка настроить веб-пакет для создания моих файлов .js и .vue.

Кажется, что нет функции переноса в стиле _name() {} в обычный JavaScript.

Думаю, это должно сделать этоиз коробки, прямо в обыкновенные js, если не указано иное.

Понятия не имею, почему происходит сбой только в IE с некоторой общей синтаксической ошибкой JS, связанной с точкой с запятой.

Полагаю, немногофлаг, настройка, что-то, где-то.

Ищите здесь несколько предложений.

ex vue 

<script>
    export default {
        computed: {
            _name() {
                return 'blah';
            }
        }
    };
</script>

package.json 

"@babel/core": "7.0.0-beta.42",
"@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.42",
"@babel/preset-env": "7.0.0-beta.42",
"babel-loader": "8.0.0-beta.2",

"vue-loader": "9.5.1",

"vue-style-loader": "1.0.0",
"sass-loader": "3.2.3",
"node-sass": "^4.1.1",
"css-loader": "0.25.0",
"style-loader": "0.13.1",
"vue-html-loader": "1.2.3",
"file-loader": "^0.8.4",

"webpack": "3.4.1",
"webpack-dev-server": "1.16.1",
"webpack-stream": "3.2.0",
"copy-webpack-plugin": "3.0.1",
"replace-webpack-plugin": "0.1.2",
"uglifyjs-webpack-plugin": "1.2.7"

config 

entry: [__dirname + '/../src/bootstrap.js'],

output: {
    path: __dirname + '/../public',
    filename: 'app.min.js',
    chunkFilename: "[name].[chunkhash:4].js",
    publicPath: '/',
},

plugins: [
    new CopyWebpackPlugin(
        (function () {
            var copy = [{
                to: '',
                from: __dirname + '/../src/core/assets'
            }, {
                to: '',
                from: __dirname + '/../src/app/assets'
            }];

            if (data.copy) {
                copy.concat(data.copy);
            }

            return copy;
        })()
    ),

    new ReplacePlugin({
        skip: false,
        entry: 'src/index.html',
        output: '/public/index.html',
        hash: '[hash]',
        data: {
            scripts: data.scripts
        }
    })
],

module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }
    }, {
        test: /\.vue$/,
        // exclude: /node_modules/,
        loader: 'vue-loader',

        options: {
            loaders: {
                js: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                sass: 'sass-loader'
            }
        }
    }]
}

сборка выглядит следующим образом 

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

/* harmony default export */ __webpack_exports__["default"] = ({
  props: ['name', 'timeout', 'max'],
  computed: {
    _name() {
      return this.name || 'global';
    },

    ...

РЕДАКТИРОВАТЬ:

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

{
    "plugins": [
        "@babel/plugin-transform-spread",
        "@babel/plugin-transform-destructuring",
        "@babel/plugin-transform-block-scoping",
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-transform-template-literals",
        "@babel/plugin-transform-computed-properties",
        "@babel/plugin-transform-shorthand-properties"
    ]
}

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

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

из выходных данных подтверждается, что сокращенное свойство не передается

вы используете сокращенное свойство ES6, которое не поддерживается в iE, вам необходимо настроить конфигурацию babel так,что он перенес это в более старую версию (для получения дополнительной информации о поддержке браузера посетите эту ссылку )

, чтобы сделать вашу конфигурацию babel совместимой, т.е. использовать что-то подобное в babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
        "useBuiltIns": true
    }],

  ]
}

, если это не сработает, попробуйте изменить ваш devtool конфиг в веб-пакете (например, eval на что-то другое) и отметьте этот поток из github

0 голосов
/ 01 ноября 2018

Поскольку это настраиваемая конфигурация веб-пакета и неясно, есть ли какая-либо дополнительная конфигурация для babel, попробуйте добавить @ babel / plugin-transform-shorthand-properties plugin в babel-loader опции для .vue файла. 

loaders: {
  js: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-shorthand-properties']
    }
  },
  sass: 'sass-loader'
}
...