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文件内容中找到它的位置（如何）？

externals：{ paypal：＆＃39; checkout＆＃39;。 //或＆＃39; paypal-checkout＆＃39;或者＆＃39; paypal＆＃39; ??? }，

感谢您的反馈

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'

Answer 2

html-webpack-externals-plugin 已有很长时间没有更新，并且具有bug。
如果有人使用第三方库，例如“ http://somedomain/plugin.js”（不是CDN），则可以使用 html-webpack-tags-plugin 。它的旧名称是 html-webpack-include-assets-plugin ，该名称取决于 html-webpack-externals-plugin 。
我在vue-cli3.x中使用了多页，一切正常。
示例：

    plugins: [
      new HtmlWebpackTagsPlugin({
        append: false, // append first
        publicPath: false, // remote lib doesn't use publicPath
        tags: [http://somedomain/plugin.js]
      })
    ]

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

2 个答案: