преобразование старого js с веб-пакетом в свойство es6 неопределенная ошибка - PullRequest
Новая
       21

преобразование старого js с веб-пакетом в свойство es6 неопределенная ошибка

0 голосов
/ 04 апреля 2020

Я пытаюсь обновить свой код и знания и преобразовываю сайт для компиляции ресурсов и js с помощью веб-пакета. Я учусь как go, но застрял в том, как решить эту проблему и изменить базу кода шаблонов.

Сценарий шаблона длинный, но я успешно импортировал его с этим изменением: 

export let App = function() {
// handler functions etc in here (removed for brevity)
}

У меня проблемы с этим дополнительным методом, который устанавливает цвета темы: 

(function() {
    this.Theme = (function() {
        function Theme() {}
        Theme.colors = {
            white: "#FFFFFF",
            primary: "#5E87B0",
            red: "#D9534F",
            green: "#A8BC7B",
            blue: "#70AFC4",
            orange: "#F0AD4E",
            yellow: "#FCD76A",
            gray: "#6B787F",
            lightBlue: "#D4E5DE",
            purple: "#A696CE",
            pink: "#DB5E8C",
            dark_orange: "#F38630"
        };
        return Theme;
    })();
})(window.jQuery);

При загрузке страницы ошибка: test.js:14773 Uncaught TypeError: Cannot set property 'Theme' of undefined

В Chrome это this.Theme = (function() {, который вызывает неопределенную ошибку.

код работает, если я просто импортирую его на страницу в виде встроенного тега сценария, но я пытаюсь улучшить кодирование.

Я просто не уверен, как заставить это работать.

Вот метод в основном скрипте, который вызывает этот метод: 

$('#dash_pie_3').easyPieChart({
            easing: 'easeOutBounce',
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent) + "%");
            },
            lineWidth: 6,
            barColor: Theme.colors.pink
        });

Я использую laravel mix, чтобы помочь скомпилировать, и вот мой скрипт, который объединяет модули: 

/*
* import core plugins
 */

import $ from 'jquery';
import jQuery from 'jquery';

window.$ = window.jQuery = $;

import {App} from '../core/script';
import {Theme} from '../core/script';
import {data} from './basic';


//{test script}
$(document).ready(function(){
    console.log("data:DR1", data);
    $('.test-div').html("TESTING");
    // console.log("App:", App);
});

Стоит ли мне пытаться перейти на es6 или каким принципам я должен следовать, чтобы заставить это работать

...