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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3042 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如在 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

2016-08-01 17:10:36 +08:00

这要看你怎么用 webpack

withinthefog

2016-08-01 18:50:44 +08:00

ProviderPlugin?

NemoAlex

2016-08-01 19:03:59 +08:00

哪里用哪里 import 就好了，现在的库就算不支持 AMD ，也不至于说必须要用 window 上的变量啊。

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 上，也不需要在别的地方额外引用