-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
webpack中library和libraryTarget与externals的使用 #10
Comments
终于理解externals的用法了,感谢 |
解惑了,大赞一个 |
可以将js按照文件夹单独打包出来吗?就像gulp那样可以按照文件夹结构单独打包js @zhengweikeng |
@superNever 这个我还真不清楚。 webpack可以定义多个entry,每个entry文件放到指定的目录。 |
文中
应该是
key 是 require 的包名,value 是全局的变量。 |
上文libraryTarget实例中只有一个Tools模块:
··· |
请问一下externals指定的依赖只能通过外部cdn引入吗,能放在项目中吗 |
明白了,感谢 |
好棒,感谢~ |
thank you so much!!! |
感谢分享 |
thanks |
@codingplayboy 一个项目按理说就是只能暴露出一个模块啊。一个npm包也只能有一个入口嘛。 |
@alsotang 可能是我之前理解有点问题,应该是libraryTarget是用来开发npm库/包的,实际开发项目/产品代码配置应该不会用吧。 |
libraryTarget会用到,比如你的npm库用了新语法,需要用到babel打成umd的es5形式
Jiangang Xiong <[email protected]>于2018年5月26日 周六10:53写道:
@alsotang <https://github.com/alsotang>
可能是我之前理解有点问题,应该是libraryTarget是用来开发npm库/包的,实际开发项目/产品代码配置应该不会用吧。
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#10 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABGB75aUqg_C3SRml0ILy0fBS16ezCZfks5t2LWKgaJpZM4H31T->
.
--
GitHub: https://github.com/alsotang
|
externals
官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
怎么理解呢?我们先通过官网说的那个jquery的案例来理解。
有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我们在使用时,依旧用require的方式来使用,但是却不希望webpack将它又编译进文件中。
jquery的使用如下
这时,我们便需要配置externals
我们可以看看编译后的文件
我们自己可以写个例子,当然这个例子没什么实际意义,只是为了演示如何使用而已。
假设我们自己有个工具库,tools.js,它并没有提供给我们UMD的那些功能,只是使用window或者global的方式把工具的对象tools暴露出来
接下来把它放在任何页面能够引用到的地方,例如CDN,然后用script的方式引入页面
一般来说我们可能会直接就这么用了
但是既然我们是模块化开发,当然要杜绝一切全局变量了,我们要用require的方式。
这是我们再来配置一些externals即可
关于externals的配置
首先是libraryTarget的配置,我们上面的例子都是umd
当然它还有其他配置方式,具体就看官网文档吧,我们可以看到配置成umd便可以使用任何一种引入的方式了
library和libraryTarget使用场景
接下来我们来说说library和libraryTarget的使用场景。
有些时候我们想要开发一个库,如lodash、underscore这些,这些库既可以用commonjs和amd的方式使用,也可以通过script标签的方式引入使用,目前很多库都是支持这几种使用方式的。
这时候我们就可以使用library和libraryTarget了,我们只需要用用es6的方式写代码,如何编译成umd就交给webpack了。
还是上面那个tools的例子
接下来配置webpack
library指定的就是你使用require时的模块名,这里便是require("tools")
通过配置不同的libraryTarget会生成不同umd的代码,例如可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的。
开发测试之后,便可以发布到npm给别人使用了。
The text was updated successfully, but these errors were encountered: