Webpacker, babel, uglifyjs-webpack-plugin - не трансформирует функции стрелок, а только в файлы Vue - PullRequest
Новая
       12

Webpacker, babel, uglifyjs-webpack-plugin - не трансформирует функции стрелок, а только в файлы Vue

0 голосов
/ 14 декабря 2018

Запуск webpacker 3.5.5 (и гем, и пакет).В основном это работает, но в IE11 приложение не работает, потому что функции стрелок, похоже, не преобразуются.Однако, проверяя минимизированный код, кажется, что единственное место, где функции стрелок не преобразованы, находится внутри моих компонентов vue.

Я думаю, это потому, что мой плагин свойств класса babel каким-то образом не применяется к моему загрузчику Vue, ноЯ не смог придумать решение.

Вот мой .babelrc 

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "IE 11"
          ],
          "uglify": true
        },
        "useBuiltIns": true
      }
    ]
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ],
  "env": {
    "test": {
      "presets": ["es2015"]
    }
  }
}

А вот и весь мой файл environment.js, который изменяет среду webpack, с которой поставляется webpacker (vue loader внизу). 

const { environment } = require('@rails/webpacker');

environment.loaders.append('expose', {
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: 'jQuery'
    }]
});

const webpack = require('webpack');

// append some global plugins
environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    axios: 'axios',
    moment: 'moment-timezone',
    _: 'lodash'
}));

// Necesary configuration for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin');
environment.plugins.append(
    'VueLoaderPlugin',
    new VueLoaderPlugin()
);
environment.loaders.append('vue', {
    test: /\.vue$/,
    loader: 'vue-loader'
});

module.exports = environment;

Редактировать для получения дополнительной информации: Вот точка входа в мой пакет под названием 'wrestling' 

import 'babel-polyfill';
import 'wrestling';

Затем в wrestling.js ... 

import './styles/wrestling'

import Rails from 'rails-ujs'
Rails.start();

import wrestlingSetup from './wrestlingSetup'
wrestlingSetup();

WrestlingSetupсодержит фактические ссылки на файлы VUE.Я сократил файл, чтобы показать, как выглядит одиночный импорт VUE внутри файла.Все остальные по сути одинаковы. 

import Vue from 'vue/dist/vue.esm'

// Redacted a bunch of imports, but they all look like this oen
import WrestlerCreate from './vue/wrestler_create.vue'

export default function() {
    document.addEventListener('DOMContentLoaded', () => {
        axiosSetup();

        const app = new Vue({
            el: '#app',
            components: {
                // Other vue components here that I've removed for simplicity
                WrestlerCreate,
            }
        })
    });
}

Вот фактический пример компонента Vue 

<template>
    <div role="form">
        <!-- other form elements -->
    </div>
</template>

<script>
    export default {
        name: 'wrestler-create',
        props: [

        ],
        // This does not get transformed by babel 
        data() {
            return {
                loading: false,
                error: false,
                errorMessage: "Error, please try again later or contact support.",

                first_name: '',
                last_name: '',
                weight_class: '',
                academic_class: ''
            }
        },
        methods: {
            // removed for simplicity
        }
    }
</script>

1 Ответ

0 голосов
/ 18 декабря 2018

Для уточнения:

Пожалуйста, используйте функцию () для данных.Я считаю, что функция () доставляет мне меньше хлопот, чем функции стрелок.

export default {
  data: function() {
     return {
       message: "Hello something!",
       secondMessage: "Hello world!" 
     };
  }
}

Если вы действительно хотите использовать функцию стрелки, вы можете написать: 

export default {
  data: () => {
     return {
       message: "Hello something!",
       secondMessage: "Hello world!" 
     };
  }
}
...