Webpack引入未模块化的库

Vue 项目中使用了 annotorious 插件，根据需要修改源码，但是修改过后的js文件无法通过 import 形式引入，纠结了好几天，现在把解决方案记录一下。

项目技术点

• vue 2.0
• webpack 1.0

场景还原

最开始的写法是这样的，项目运行正常

import 'annotorious-bower/annotorious.min.js';

修改源码后，js 文件放到了一个自定义的文件夹下 src/assets/js , 使用下面的方式引入 js

import '../../src/assets/js/annotorious.min.js';

运行项目，报错

27.png

小错误，这都不是事儿，然后这个问题纠结了三天 ...

解决方案

使用 exports-loaderscript-loader 搞定，先安装

npm i -D exports-loader script-loader

在 webpack.base.conf.js 中添加配置

...
module: {
  loaders: [
    {
      test: require.resolve('../src/assets/js/annotorious.min.js'),
      loader: 'exports-loader?window.anno!script-loader'
    }
 ]
}
...

在 .vue 文件中引入文件修改为下面的方式

require("exports?window.anno!../../src/assets/js/annotorious.min.js");

window.anno js文件中返回的全局变量

执行到这一步就没问题了 。

-- end --