在没有安装 npm 或 webpack 的情况下导入 vuejs 组件

Question

I am trying to include this component in my project: https://www.npmjs.com/package/vuejs-auto-complete

The problem is I am not allowed to use npm install. We are not using npm or webpack on the project (something about a small footprint and minimizing dependencies) so all I have to work with is LibMan.

I found the component on unpkg using LibMan and "installed" it. However this only gave me two files: dist/build.js and build.js.map (I assume this is some webpack thing).

Unlike other components I got from unpkg, (which give me something like component.esm.js to work with) I am unable to import the component from the file:

import { Autocomplete } from "../../lib/vuejs-auto-complete/dist/build.js";

gives me

SyntaxError: import not found: Autocomplete

I have tried the component in a side project, where I used npm install, and it worked fine.

How do I make it work in my scenario?

Answer 1

You have to import Autocomplete as a default import like so:

import Autocomplete from '../path/to/dist/build.js';

or use node's require() function:

const Autocomplete = require('../path/to/dist/build.js');

Answer 2

You have to import it like this:

import Autocomplete from "../../lib/vuejs-auto-complete/dist/build.js";

And then in components section:

components: {Autocomplete}