javascript - 用 webpack 填充一个包

Question

我需要在我的项目中使用一个 javascript 文件作为依赖项。它没有 github 存储库，它不在 bower 或 npm 上，它就在这里。

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

我可以用 bower 安装它:

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

然后像这样“填充”_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。