使用webpack映入外部资源的时候找不到该模块

Question

我就是按照官网提供的外部扩展文档引入在线资源时候一直引入不成功
代码如下
完全按照webpack官网提供的教程来做的

这个是public文件夹下面的index.html引入jq的代码

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>

这里是webpack.config.js配置文件暴露出去的代码

module.exports = {
    externals: {
      jquery: 'jQuery',
      //quill:'Quill'
    }
  }

这里是在组件里面使用jq的代码

<template>
  <div id="editor">111111</div>
</template>
<script>
//import Quill from 'quill'

import $ from "jquery";

export default {
  data() {
    return {};
  },
  mounted() {
    console.log($);

    // const quill = new Quill("#editor", {
    //   theme: "snow",
    // });
  },
  methods: {},
};
</script>
<style>
</style>

然后就会报找不到jquery这个模块的错误 无法编译

有个答主说不要采用improt的方法我试过了依然不行还是找不到jq

<template>
  <div id="editor">111111</div>
</template>
<script>
//import Quill from 'quill'

const $ = jQuery;

export default {
  data() {
    return {};
  },
  mounted() {
    console.log($);

    // const quill = new Quill("#editor", {
    //   theme: "snow",
    // });
  },
  methods: {},
};
</script>
<style>
</style>

下面这个是浏览器的报错信息，不采用improt的情况下的报错信息

Uncaught ReferenceError: jQuery is not defined
    <anonymous> index.vue:7
    ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/externals/index.vue?vue&type=script&lang=js& app.js:950
    __webpack_require__ app.js:849
    fn app.js:151
    <anonymous> index.vue:1
    ./src/components/externals/index.vue?vue&type=script&lang=js& app.js:1115
    __webpack_require__ app.js:849
    fn app.js:151
    <anonymous> index.vue:1
    vue app.js:1103
    __webpack_require__ app.js:849
    fn app.js:151
    <anonymous> cjs.js:4
    ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& app.js:938
    __webpack_require__ app.js:849
    fn app.js:151
    <anonymous> App.vue:1
    ./src/App.vue?vue&type=script&lang=js& app.js:1079
    __webpack_require__ app.js:849
    fn app.js:151
    <anonymous> App.vue:1
    vue app.js:1067
    __webpack_require__ app.js:849
    fn app.js:151
    <anonymous> main.js:11
    js app.js:1234
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1271
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928

Answer 1

externals 的模块不用import，直接使用。
如果找不到 $ 的话

const $ = jQuery;

如果想按照模块化方式引用的话(推荐)，jquery 也是有 npm 包的：

npm  i  jquery --save-dev

---

https://code.jquery.com/jquer... 这个 CDN 访问不了，这才是你的测试代码不通过的原因。
如果要在 https 网页里支持的话你最好找一个 https 可用的 CDN ，百度的应该可以。