daiwenzh5

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

  •  
  •   daiwenzh5 · Aug 15, 2020 · 2539 views
    This topic created in 2123 days ago, the information mentioned may be changed or developed.

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

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

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

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


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

    6 replies    2020-08-15 23:41:49 +08:00
    randyo
        1
    randyo  
       Aug 15, 2020 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  
       Aug 15, 2020 via Android
    你可以理解为原来找 xxx 依赖引入,后来改为 window.externals 当然,引入 cdn 的包就需要你自己搞了
    wszgrcy
        3
    wszgrcy  
       Aug 15, 2020 via Android
    @wszgrcy 写错了是改为 window.yyyy(你定义的那个)
    daiwenzh5
        4
    daiwenzh5  
    OP
       Aug 15, 2020
    @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  
       Aug 15, 2020 via Android
    @daiwenzh5 写反了吧,应该是 'quasar-tiptap/lib/quasar-tiptap.esm' : 'QuasarTiptapPlugin'
    daiwenzh5
        6
    daiwenzh5  
    OP
       Aug 15, 2020
    @randyo 刚刚试了下,成功了,果然如此。

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

    嗯问题解决了,再次感谢你的解答!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3131 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 13:30 · PVG 21:30 · LAX 06:30 · JFK 09:30
    ♥ Do have faith in what you're doing.