使用 Webpack 在 vue 文件中使用外部 js 文件答案

【问题标题】：Using external js file in vue file with Webpack使用 Webpack 在 vue 文件中使用外部 js 文件
【发布时间】：2018-06-29 15:40:32
【问题描述】：

我正在开发一个同时使用 typescript、vue 和 webpack 的项目。我已经创建了一些组件，我可以通过导入来使用它们。但是我在另一个根文件夹中有不同的 js 文件，例如 site.js、ruler.js、color.js、speech.js、drware.js 等。架构如下所示

+|dist
 ----build.js
+|src
 ----index.ts
  +|main
    ----Header.vue
    ----Footer.vue
    ----Body.vue
+|lib
 ----site.js
 ----ruler.js
 ----drawer.js
 ----color.js

webpack 配置正在从 src 文件夹获取 index.ts，如上所示。当我不使用某些功能（如 jquery 插件或某些特殊功能）时，一切都很好。但是当我使用来自 site.js 的功能时，webpack 出现错误，例如无法从 site.js 解析“标尺”

我试图通过在 webpack.config.js 中提供第二个条目来连接，但它并没有解决我的问题。我想知道如何使用 webpack 解析 vue 或 ts 文件中的外部 js 文件。我也试过了

require(""../src/site.js)

但它也没有用。

编辑：如果我手动连接 js 文件并将其作为 html 上的脚本源，它可以正常工作，但我无法合并所有文件，或者我不想使用“gulp”来连接它们

【问题讨论】：

标签： javascript typescript webpack vue.js

【解决方案1】：

您是否尝试过在 webpack 的配置中包含脚本加载器？

Webpack 是一个打包器，而不是脚本加载器本身。我建议您关注webpack's official instructions 添加脚本加载器。

祝你好运！

【讨论】：