在Vue+TypeScript+Webpack项目中引入外部JS文件的问题

嘿，我刚碰到过类似的情况，咱们一步步来搞定它！

首先，问题的核心是：你的site.js应该是采用了非模块化的写法（比如直接全局调用ruler里的方法），而Webpack默认是按照ES模块/CommonJS的规则来解析依赖的，它找不到site.js里引用的ruler变量，所以才会报错。

下面给你几个不同场景下的解决方案，你可以根据自己的情况选：

方案1：改造lib目录下的JS为模块化（推荐） #

如果这些JS文件是你自己写的，优先把它们改成符合模块化规范的代码，这样Webpack就能自动解析依赖链了：

1. 修改site.js，用CommonJS语法引入依赖：

// lib/site.js
const ruler = require('./ruler.js');
const drawer = require('./drawer.js');
const color = require('./color.js');

// 原来的业务代码里，把全局调用改成ruler.xxx的形式
// 比如原来的ruler.draw() 改成 ruler.draw()（如果ruler导出了draw方法）

// 最后导出site里需要对外暴露的方法
module.exports = {
  initSite: function() {
    // 你的初始化逻辑
  }
};

2. 对应地，也要修改ruler.js、drawer.js、color.js，把需要被引用的方法导出：

// lib/ruler.js
module.exports = {
  draw: function() {
    // 方法逻辑
  }
};

3. 之后在你的Vue/TS文件里就可以正常导入了：

// src/index.ts 或者某个Vue组件里
import site from '../lib/site.js';

// 调用site的方法
site.initSite();

方案2：用Webpack的ProvidePlugin自动注入全局依赖 #

如果不想修改lib里的JS代码（比如是第三方库），可以用Webpack的ProvidePlugin把依赖自动注入到全局作用域，让site.js能找到它们：

1. 在webpack.config.js里配置插件：

const webpack = require('webpack');

module.exports = {
  // 你的其他配置（入口、输出、loader等）
  plugins: [
    new webpack.ProvidePlugin({
      // 把ruler、drawer、color这些变量绑定到全局，对应它们的文件路径
      ruler: '../lib/ruler.js',
      drawer: '../lib/drawer.js',
      color: '../lib/color.js'
    })
  ]
};

2. 之后你就可以在Vue/TS文件里直接导入site.js，Webpack会自动帮你把依赖加载好：

import '../lib/site.js';

方案3：用script-loader加载全局脚本 #

另一种不修改源码的方法是用script-loader，它会把JS文件在全局作用域下执行，模拟你手动用<script>标签引入的效果：

1. 先安装script-loader：

npm install script-loader --save-dev

2. 在你的入口文件（比如src/index.ts）里按依赖顺序导入：

// 注意顺序：先加载依赖，再加载site.js
import 'script-loader!../lib/ruler.js';
import 'script-loader!../lib/drawer.js';
import 'script-loader!../lib/color.js';
import 'script-loader!../lib/site.js';

这样这些脚本就会像你手动在HTML里引入一样，在全局作用域执行，site.js就能找到它需要的依赖了。

内容的提问来源于stack exchange，提问作者Can PERK