84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
最近刚开始看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。。。。。。。。。。。。。。。。。。。。。。。