V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
daiwenzh5
V2EX  ›  前端开发

webpack externals 外部加载 cdn 文件到底是怎么用的?

  •  
  •   daiwenzh5 · 2020-08-15 04:01:49 +08:00 · 1653 次点击
    这是一个创建于 1321 天前的主题,其中的信息可能已经有所发展或是发生改变。

    PS: 请关注问题本身,不要往无关方向延申,谢谢。

    1 、externals 之后,需不需要安装依赖: a.需要,依赖会被自动剔除; b.不需要,直接从文件加载;

    • 实际上在测试时,不安装依赖会无法编译,缺失类型;

    2 、externals 的具体语法怎么使用的: a.在网上找了一圈,都是官网的 jQ,干懵了; b.引入 cdn 时,是写 ['文件名','文件内 export 变量名']?


    以上,这两个问题折磨我好几个小时了,硬是没测出来,望高手、前辈们指教。

    6 条回复    2020-08-15 23:41:49 +08:00
    randyo
        1
    randyo  
       2020-08-15 08:35:08 +08:00 via Android
    1,需要安装依赖的,这样才能编译和智能语法提示什么的。打包时 webpack 会把 externals 的部分去除。比如你写一个插件,没有 externals 的话,只需要在网页引入打包后的 js 就可以运行了,有 externals 的话还需要在你的 js 之前引入被 externals 的部分脚本。
    2,语法就是 key 是引用的包名,value 是引入后的变量名称。比如 import $ from 'jquery',要把 jQuery 作为 externals 的话就写 jquery:'$'。看看 webpack 文档,还有更精细的设置 https://webpack.docschina.org/configuration/externals/
    wszgrcy
        2
    wszgrcy  
       2020-08-15 08:59:44 +08:00 via Android
    你可以理解为原来找 xxx 依赖引入,后来改为 window.externals 当然,引入 cdn 的包就需要你自己搞了
    wszgrcy
        3
    wszgrcy  
       2020-08-15 09:00:25 +08:00 via Android
    @wszgrcy 写错了是改为 window.yyyy(你定义的那个)
    daiwenzh5
        4
    daiwenzh5  
    OP
       2020-08-15 14:38:51 +08:00
    @randyo @wszgrcy 感谢你们的回答,但我还是没整明白。。。
    [![dFobCD.png]( https://s1.ax1x.com/2020/08/15/dFobCD.png)]( https://imgchr.com/i/dFobCD)
    我使用 quasar-tiptap 这个依赖,引入方式是这样的
    import {QuasarTiptapPlugin} from 'quasar-tiptap/lib/quasar-tiptap.esm'

    externals = {
    QuasarTiptapPlugin: ['quasar-tiptap/lib/quasar-tiptap.esm', 'QuasarTiptapPlugin']
    }
    我在 index.html 中添加了 cdn 链接。
    是这样用的吗?打包之后,这个依赖还是在啊,体积并没有缩小。
    randyo
        5
    randyo  
       2020-08-15 23:04:43 +08:00 via Android
    @daiwenzh5 写反了吧,应该是 'quasar-tiptap/lib/quasar-tiptap.esm' : 'QuasarTiptapPlugin'
    daiwenzh5
        6
    daiwenzh5  
    OP
       2020-08-15 23:41:49 +08:00
    @randyo 刚刚试了下,成功了,果然如此。

    但我是仿照官网写的:
    ```js
    externals: {
    subtract: ['./math', 'subtract']
    }
    ```
    我以为引用子属性得用这个二级结构。

    嗯问题解决了,再次感谢你的解答!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1068 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 19:04 · PVG 03:04 · LAX 12:04 · JFK 15:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.