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

姬赓
  • 1
新手上路,请多包涵

我就是按照官网提供的外部扩展文档引入在线资源时候一直引入不成功
代码如下
完全按照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
回复
阅读 685
1 个回答
知名喷子
  • 3.4k

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

const $ = jQuery;

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

npm  i  jquery --save-dev

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

宣传栏