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

Posted 2023-03-22

【中文标题】在没有 npm install 或 webpack 的情况下导入 vuejs 组件

【英文标题】：Importing a vuejs component without npm install or webpack

【发布时间】：2020-01-29 20:03:05

【问题描述】：

我正在尝试将此组件包含在我的项目中： https://www.npmjs.com/package/vuejs-auto-complete

问题是我不允许使用 npm install。我们没有在项目中使用 npm 或 webpack（关于占用空间小和最小化依赖关系的东西），所以我只需要使用 LibMan。

我使用 LibMan 在 unpkg 上找到了该组件并“安装”了它。然而这只给了我两个文件：dist/build.js 和 build.js.map（我认为这是一些 webpack 的东西）。

与我从 unpkg 获得的其他组件不同（它给了我类似 component.esm.js 的东西）我无法从文件中导入组件：

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

给我

语法错误：找不到导入：自动完成

我在一个使用 npm install 的辅助项目中尝试了该组件，它运行良好。

如何让它在我的场景中发挥作用？

【参考方案1】：

您必须像这样将自动完成导入为默认导入：

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

或者使用节点的require()函数：

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

【讨论】：

从“../../lib/vuejs-auto-complete/dist/build.js”导入自动完成；这给了我 SyntaxError: import not found: default

@Shaggydog 你在将你的代码转换成 es5 吗？

我真的不知道。我不是建立这个项目的人，正如你所看到的，我对整个前端/javascript/打包这件事很陌生。我怎么知道？

好的，我已经完成了项目的管道，现在我可以自信地说，没有进行转译，文件只是按原样提供给浏览器。

@Shaggydog 我不能 100% 确定您为什么会遇到此错误 - 我只是自己尝试过并且可以毫无问题地加载它。您正在将type=module 属性添加到您的脚本标签？ （如果不加载，Vue 甚至都不应该加载）

【参考方案2】：

你必须像这样导入它：

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

然后在组件部分：

components: Autocomplete