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

时间:2016-08-07 16:07:36

标签: angularjs npm ecmascript-6 webpack commonjs

我试图弄清楚如何将这个javascript包含在webpack中,但我正在苦苦挣扎。我通过npm安装一个名为angular-colorthief的角度模块。我已经安装了它并将模块包含在我的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目录里面是角度模块依赖的另一个js,叫做color-thief.js。此文件不会导出任何内容。 angular-colorthief模块需要这样:

use strict';

require("./color-thief");

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

当我运行我的应用程序时,我不断收到ColorThief未定义的错误,因为尽管此脚本包含在我的供应商包中,但在角度模块运行时它不可用。任何人都可以帮我解决这个问题吗?我尝试过安装exports-loader模块,但我不确定如何使用它来解决这个问题。这是我试图添加的加载器,但这没有用。

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

1 个答案:

答案 0 :(得分: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"
        }