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

＆＃34; shim＆＃34;像这样导出_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填充包装

1 个答案: