Add npm modules to Piranha CMS

  Kiến thức lập trình

I’m new to extending the Piranha CMS on the frontend side of things and I’m wanting to add more functionality to the manager pages using some libraries from npm. The CMS is using Vue, which has some helpful libraries available. I want to use

import { SomeLibrary } from "some-library"

as well as the corresponding Vue components that the library comes with (ie, <some-library/>). However, I’m unable to use them due to the way Piranha accepts custom scripts. The scripts are added into the project via

App.Modules.Manager().Scripts.Add("~/assets/js/myscripts.js");

which does not leave room for me to use modules for my javascript, as far as I know. Is there some way around this so I can use npm libraries?

More info added, here is an example of what I am trying to do and why it does not work. The file test.js is added to the project in Startup.cs with the above line.

test.js:

import draggable from 'vuedraggable'

export default {
    components: {
        draggable,
    },
    data() {
        return {}
    },
    created() {
        console.log("I am a test");
    }
}

Navigating to any page in the project results in the error Uncaught SyntaxError: Cannot use import statement outside a module. I cannot add type="module" to the Startup.cs because there are no parameters to do this., and I’m not sure if that would even solve the problem. I’ve only ever worked with javascript using modules so I’m unsure what’s going on here. Am I missing something obvious? How can you use any npm libraries (which are modules) in the project otherwise?

3

LEAVE A COMMENT