用webpack填充包装

Question

我需要在项目中使用javascript文件作为依赖项.它没有github存储库,它不是凉亭,或者是npm,它只是住在这里.

http://a.klaviyo.com/media/js/learnmarklet.js

我可以用凉亭安装它:

bower install http://a.klaviyo.com/media/js/learnmarklet.js --save

我知道它会在我的项目中生活:

./bower_components/learnmarklet/index.js

我知道它附加了一个调用_learnq全局窗口对象的变量.

我想要的只是这个.

var _learnq = require("klaviyo")

我需要别名klaviyo这样的东西.

{
  "klaviyo": "./bower_components/learnmarklet/index.js"
}

并且"shim" _learnq像这样导出变量.

{
  "klaviyo": "_learnq"
}

我怎么能用webpack做到这一点？

这就是我尝试过的,这就是我的webpack.config.js样子.

module.exports = {
  resolve:{
    alias:{
      "klaviyo": "./bower_components/learnmarklet/index.js"
    }
  },
  externals: {
    klaviyo: "_learnq"
  }
}

Answer 1

在你的例子中,你的代码会发生冲突,externals基本上说

require('klaviyo')

应该改写成

window._learnq

别名说

require('klaviyo')

基本上

require('./bower_components/learnmarklet/index.js')

我建议的是:

module.exports = {
  resolve:{
    alias:{
      // Make it so that 'require' finds the right file.
      "klaviyo": "./bower_components/learnmarklet/index.js"
    }
  },
  module: {
    loaders: [{
      // Rewrite the file so that it exports the window global.
      test: __dirname + '/bower_components/learnmarklet/index.js',
      loader: 'exports?window._learnq'
    }]
  }
}

你也需要npm install exports-loader.