简体   繁体   中英

How to use webpack with js that isn't exported

I'm trying to figure out how to include this javascript with webpack but I'm struggling. I'm installing an angular module called angular-colorthief via npm. I've installed it and included the module in my webpack config file:

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'

            ]
        };
    }

The problem is that inside of the angular-colorthief directory is another js which the angular module depends on which is called color-thief.js. This file does not export anything. The angular-colorthief module requires it this way:

use strict';

require("./color-thief");

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

When I run my app I keep getting an error that ColorThief is undefined because although this script is being included in my vendor bundle, it's not available when the angular module runs. Can anyone help me to fix this? I've tried installing the exports-loader module but I'm unsure how to use it to solve this problem. This is the loader I tried to add but this didn't work.

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

So I'm not certain if this is the correct solution but it solved my problem. If someone could tell me a better way I would definitely appreciate that. For anyone else, here is what I ended up adding to my loaders.

{
          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"
        }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM