webpack - Vue.js 2 Webpack 3 如何从 CDN 将外部 .js 插入到 webpack 外部？

Question

当我们使用像 jQuery 这样的 cdn 库而不是捆绑它时

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
    integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
    crossorigin="anonymous">
</script>

我们必须将其作为外部依赖项包含在内:

externals: {
   jquery: 'jQuery'
}

然后在 Vue.component 中引入它

import $ from 'jquery';
..
$('.my-element').animate(...);

好的，但是我们如何找到要插入外部的模块 ID？

例如，如果我使用 paypal api checkout.js

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

我需要将它导入我的组件 vue

import paypal from 'paypal'

要写入 webpack 外部的模块 ID 是什么？我们可以从 paypal.js 文件内容中的何处(如何)找到它？

外部:{ Paypal :'结帐'。//或 'paypal-checkout' 或 'paypal' ??? },

感谢反馈

Answer 1

已解决...使用 html-webpack-externals-plugin 包!

yarn add html-webpack-externals-plugin --dev

webpack.dev.conf.js

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
...
plugins: [
    ...
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'paypal',
          entry: 'https://www.paypalobjects.com/api/checkout.js',
          global: 'paypal'
        }
      ]
    }),
...

index.html

  <script src="https://www.paypalobjects.com/api/checkout.js"></script>

Payments.vue 组件

<script>
  ....
  import paypal from 'paypal'