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

Webpack 怎么解决 import 的包的依赖问题?

  •  
  •   sunjourney · 2016-08-01 15:27:48 +08:00 · 6822 次点击
    这是一个创建于 2797 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如在 SPA 组件中要引入一个 Tool , Tool 依赖 jQuery, underscore 等插件,直接 import Tool, 会找不到 '$' 和 '_',用 webpack 的 SHIMMING MODULES, 或者 external libs ,都需要类似的写法:

    require("imports?$=jquery!./file.js")
    
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
    

    这是在已知会用到 '$' 和 '_' 的情况下还可以这么用,万一用了些不知名的 lib ,要全局暴露的名字需要的等报错的时候在 Webpack 加入岂不是很蠢。

    脱离 webpack 框架的写法是 html 插入 被依赖的 <script> ,变量名全局都可以用,不用特别声明。但 webpack 组件不声明就读取不到 $ 和 _,怎么保证 import 来的 module 可以正常工作?

    4 条回复    2016-08-25 00:32:37 +08:00
    Tigris
        1
    Tigris  
       2016-08-01 17:10:36 +08:00
    这要看你怎么用 webpack
    withinthefog
        2
    withinthefog  
       2016-08-01 18:50:44 +08:00
    ProviderPlugin?
    NemoAlex
        3
    NemoAlex  
       2016-08-01 19:03:59 +08:00
    哪里用哪里 import 就好了,现在的库就算不支持 AMD ,也不至于说必须要用 window 上的变量啊。
    cbais7890
        4
    cbais7890  
       2016-08-25 00:32:37 +08:00
    这个问题应该由 tool 的作者在打包的时候就解决掉, 不应该留给使用者

    例如在 tool.js 中
    import $ from "jquery"

    那么在打包的时候,他应该在 webpack 中声明这两个依赖以何种方式加载
    例如:
    output: {
    ...
    libraryTarget: 'umd'
    },
    externals: {
    'jquery': 'umd jquery'
    }

    然后只需要正常引用 tool 就好, 只要 node_modules 下面安装了 jquery , 那么 tool 自己就会找到 jquery , 并不需要暴露到 window 上, 也不需要在别的地方额外引用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2888 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 11:22 · PVG 19:22 · LAX 04:22 · JFK 07:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.