如何将 webpack 与未导出的 js 一起使用

Question

我正在尝试弄清楚如何将此 javascript 包含在 webpack 中，但我正在努力。我正在通过 npm 安装一个名为 angular-colorthief 的 angular 模块。我已经安装它并将模块包含在我的 webpack 配置文件中：

if(TEST) {
        config.entry = {};
    } else {
        config.entry = {
            app: './client/app/app.js',
            polyfills: './client/polyfills.js',
            vendor: [
                'angular',
                'angular-colorthief',
                'angular-animate',
                'angular-aria',
                'angular-cookies',
                'angular-resource',
                'angular-route',
                'angular-sanitize',
                'angular-socket-io',
                'angular-material',
                'lodash'

            ]
        };
    }

问题是在angular-colorthief 目录里面是angular 模块依赖的另一个js，叫做color-thief.js。该文件不导出任何内容。 angular-colorthief 模块需要这样：

use strict';

require("./color-thief");

angular.module('ngColorThief', [])
  .provider('$colorThief', [function () {

当我运行我的应用程序时，我不断收到 ColorThief 未定义的错误，因为尽管此脚本包含在我的供应商包中，但当 angular 模块运行s。谁能帮我解决这个问题？我试过安装 exports-loader 模块，但我不确定如何使用它来解决这个问题。这是我尝试添加的加载程序，但没有成功。

 {
          include: require.resolve("./color-thief"),
          loader: "exports?ColorThief!node_modules/angular-colorthief/color-thief.js"
        }

Answer 1

所以我不确定这是否是正确的解决方案，但它解决了我的问题。如果有人能告诉我更好的方法，我将不胜感激。对于其他人，这是我最终添加到加载程序中的内容。

{
          include: require.resolve(path.resolve(__dirname, 'node_modules/angular-colorthief/color-thief.js')),
          loader: "exports?ColorThief"
        }, {
          include: require.resolve(path.resolve(__dirname, 'node_modules/angular-colorthief/angular-colorthief.js')),
          loader: "imports?ColorThief=./color-thief.js"
        }

如何将 webpack 与未导出的 js 一起使用

How to use webpack with js that isn't exported

commonjs

npm

angularjs

ecmascript-6

webpack