84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
最近刚开始看webpack,看到LIBRARY AND EXTERNALS时,对library与libraryTarget还有externals实在看不懂。
不知道有谁可以帮我解释一下,这三个东西具体是怎么用的?
ringa_lee
组件一般是要发布到npm或其他地方提供其他人使用的,比如你将组件发布到npm,别人可以直接 npm install xxx 来安装,使用时直接 var xxx = require('xxx');。jquery其实就发布到了npm,你可以直接 npm i jquery -S 安装,然后 var $ = require('jquery') 使用。
npm install xxx
var xxx = require('xxx');
npm i jquery -S
var $ = require('jquery')
如:你需要开发一个Math组件而且组件的入口文件只有一个,组件的源码类似:
// src/index.js export default class Math { add(a, b) { return a + b; } }
webpack配置:
{ output: { // 组件采用UMD格式打包 libraryTarget: "umd", // 组件名称 library: "Math" } }
编译后类似:
(function webpackUniversalModuleDefinition(root, factory) { // 这里就是UMD格式的组件方式 if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["Math"] = factory(); else root["Math"] = factory(); })(this, function() { return /******/ (function(modules) { // webpackBootstrap ... })([function(module, exports) { "use strict"; var Math = function () { function Math() { _classCallCheck(this, Math); } _createClass(Math, [{ key: "add", value: function add(a, b) { return a + b; } }]); return Math; }(); exports.default = Math; module.exports = exports['default']; /***/ } /******/ ]) });
比如:你在页面里通过script标签引用了jQuery:<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>,所以并不想在其他js里再打包进入一遍,比如你的其他js代码类似:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
var $ = require('jquery'); $('.test').text('hello world');
webpack设置externals如下:
{ externals: { // 其他js引用jQuery时编译类似var $ = jQuery; "jquery": "jQuery" } }
// 类似于变量替换 var $ = window.jQuery; $('.test').text('hello world');
@zhengweikeng 呃呃呃,sorry,居然是externals忘了写s。。。。。。。。。。。。。。。。。。。。。。。
library和libraryTarget使用场景组件开发
如:你需要开发一个Math组件而且组件的入口文件只有一个,组件的源码类似:
webpack配置:
编译后类似:
externals使用场景是外部依赖不需要打包进bundle
比如:你在页面里通过script标签引用了jQuery:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
,所以并不想在其他js里再打包进入一遍,比如你的其他js代码类似:webpack设置externals如下:
编译后类似:
@zhengweikeng 呃呃呃,sorry,居然是externals忘了写s。。。。。。。。。。。。。。。。。。。。。。。