how to 'import' objects without babel (using CDN)

Question

The question is a bit messy, sorry for that. But due to some weird reasons I cannot transpile my code in vue, and have to use Vue and some other packages 'directly' using CDN links.

like that:

<script src="https://cdnjs.cloudflare.com/ajax/libs/survey-vue/1.8.33/survey.vue.min.js"</script>

then if in a 'normal' Vue app, I could something like that:

import * as Survey from "survey-vue";

window.survey = new Survey.Model(json);

My attempts to refer to Survey without any import after I plug a script as above, end up with 'Survey object is undefined'.

How can I do the same if I can't import Survey since I use cdn links here?

Answer 1

You needn't import at all, you can use the global namespace:

window.survey = new Survey.Model(json);

survey
    .onComplete
    .add(function (result) {
        document
            .querySelector('#surveyResult')
            .textContent = "Result JSON:\n" + JSON.stringify(result.data, null, 3);
    });

var app = new Vue({
    el: '#surveyElement',
    data: {
        survey: survey
    }
});

Here is the working sample - https://plnkr.co/edit/kBZXGBLPJLJF5Br9