用 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 的变量附加到全局 window 对象。

我要的就是这个

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。

用 webpack 填充一个包

Shimming a package with webpack

javascript

webpack