如何用webpack打包umd模块并测试打包结果
对于 JavaScript 的模块而言, webpack 可以用来build 基于浏览器或服务端的包.
下面让我们学习如何使用webpack生成UMD.
首先需要全局安装webpack
npm install -g webpack
让我们先来创建一个用来返回两数之和的加法模块.
// add.js
module.exports = function add(a, b) {return a + b;
};接下来,我们来建立webpack配置// webpack.config.js
module.exports = {entry: './add.js',output: {filename: './dist/add.js',// export to AMD, CommonJS, or windowlibraryTarget: 'umd',// the name exported to windowlibrary: 'add'}
};
接下来使用webpack来build你的模块.
$ webpack
Hash: 87657f97293582af3ac3
Version: webpack 4.29.3
Time: 435ms
Built at: 02/22/2019 9:01:57 AMAsset Size Chunks Chunk Names
./add.js 1.17 KiB 0 [emitted] main
Entrypoint main = ./add.js
[0] ./add.js 83 bytes {0} [built
现在你可以来使用CommonJS, AMD, script tag这三种不同的方式来测试你的UMD包是否正确了.
CommonJS
在测试之前,需要确定是否安装成功Nodejs环境,
当你使用webpack打包的程序中包含了调用Window的内容时(比如操作dom啥的),需要将commonJS转换成浏览器可识别的代码.这一步有很多方法,就我而言,我推荐你使用browserify,
它的logo贼好看,让我有种在写咒语的感觉.
而且也很好用,你只要在terminal下输入 browserify 想要转换的文件 > 生成文件
,就可以生成可以在浏览器环境下使用的js啦.
如果你不想详细测试,也不想装browserify,还有一种偷懒的办法可以不完整的测试你的代码, 在nodejs环境下定义 global.window = {};
,代码应该也可以运行.
$ node
> var add = require('./dist/add');
> add(1, 2);
AMD
AMD模块需要一个requirejs模块,我这里采用的是在cdn上引用,你也可以把它下载下来,自己引入试一下.需要注意的是,如果自己引用的话,需要注意文件路径.
下载链接在这里
AMD (中文版)
<!-- amd.html -->
<html>
<body><script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script><script>window.requirejs(['dist/add'], function(add) {console.log(add(1, 2));});</script>
</body>
</html>
Script Tag
这个就是最简单的全局暴露,没啥好说的.
<!-- script-tag.html -->
<html>
<body><script src="./dist/add.js"></script><script>console.log(window.add(1, 2));</script>
</body>
</html>
本文参考了Build to UMD with webpack@1
感谢他救我于水火之中
如何用webpack打包umd模块并测试打包结果相关推荐
- Webpack打包后模块分析
测试代码 如下代码为要打包的代码以及相应的模块 // index.js const calculator = require('./calculator.js'); const sum = calcu ...
- Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体(Font)文件,devsever,生产环境配置以及css的兼容写法
目录 一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件 二.打包 ...
- Webpack打包流程系列一:打包JS(JavaScript)文件
前情提示 webpack是什么? 简单而言,webpack是一个模块打包器.它的主要目标是将JavaScript文件打包在一起,打包后的文件用于在浏览器中使用. 使用webpack的目的 当前端项目的 ...
- vue项目(webpack+mintui),使用hbuilder打包app - 小小人儿大大梦想 - 博客园
一.配置config/index.js 本人没有配置index.js文件,就开始进行了打包,结果最终效果是页面空白,解决了空白,接着底部图标(我是用的阿里巴巴图片)资源找不到.所以配置这步比较重要. ...
- webpack打包压缩混淆_前端打包利器:webpack工具
一.什么是WebPack,为什么要使用它? 1.为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端 ...
- xcode4发布测试-打包(Archive)
摘自:xcode4发布测试-打包 xcode4发布测试-打包(Archive),官方文档有误 转自"我os"的新浪博客,iOS程序发布测试4-打包(Archive)发布(share ...
- python模块os测试文件是否存在及基础原信息获取
python模块os测试文件是否存在及基础原信息获取 在自动化测试中,经常需要查找操作文件,比如说查找配置文件(从而读取配置文件的信息),查找测试报告(从而发送测试报告邮件),经常要对大量文件和大量路 ...
- 如何使用NAnt 自动打包DNN模块 之二
系列文章: 如何使用NAnt 自动打包DNN模块 之一 如何使用NAnt 自动打包DNN模块 之二 使用MSBuilder编译项目时,会出现找不到引用的DLL的问题.可以参考这里解决:http://w ...
- pyinstaller深入使用,打包指定模块,打包静态文件
1.标准用法: pyinstall **.py 直接打包 pyinstall -F **.py 打包成单文件 pyinstall -W **.py 去掉控制台窗口,黑窗口 ...
最新文章
- 一周焦点 | 李彦宏:如果谷歌回来,有信心再赢一次;GitHub深度学习开源项目Top200...
- 中国首个量子计算机诞生 中科院、阿里巴巴共同研发
- mysql repair 索引_mysql 创建索引、重建索引、查询索引、删除索引 转自:http://www.phpernote.com/mysql/942.html...
- C++ string类型占几个字节
- mysql如何实现acid中的a_MySQL如何实现事务的ACID
- 1856: [Scoi2010]字符串
- 返回一个list的全部 倒叙排列的方法
- 视频:PNAS报道纤维化扩展中“旁张力信号”介导的细胞间机械通讯
- Maven-pon.xml模板(ssm自用)持续更新
- 【C++】指针的引用及面向对象
- 智慧交通篇 2 —— 公交刷卡(非接触IC卡)系统全透析
- Redis之SDS数据结构
- 如何对PDF文件中的内容进行编辑修改
- 伪NMOS的基本特点
- fortran数组下标、行号、continue
- MemFire教程|PostgreSQL RLS介绍
- Vue实现 上传文件到七牛云
- 逻辑代数的基本定理,布尔代数中的反律,摩根定律
- 测试工程师的未来在哪里?迷茫的看过来...
- 龙芯 ls2k 保留内存