如何用webpack打包umd模块并测试打包结果

guqiu 发布于2019-08-23 15:23 / 1781人阅读

摘要：对于的模块而言可以用来基于浏览器或服务端的包下面让我们学习如何使用生成首先需要全局安装让我们先来创建一个用来返回两数之和的加法模块接下来我们来建立配置接下来使用来你的模块现在你可以来使用这三种不同的方式来测试你的包是否正确了在测试之前需要

对于 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 window
    libraryTarget: "umd",
    // the name exported to window
    library: "add"
  }
};

接下来使用webpack来build你的模块.

$ webpack
Hash: 87657f97293582af3ac3
Version: webpack 4.29.3
Time: 435ms
Built at: 02/22/2019 9:01:57 AM
   Asset      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 (中文版)

Script Tag

这个就是最简单的全局暴露,没啥好说的.

本文参考了Build to UMD with webpack@1

感谢他救我于水火之中

云服务器私有云 Webpack打包分块软件打包在线打包打包部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101981.html

基于 Gulp + Browserify 构建 ES6 环境下的自动化前端项目

摘要：本文特此给大家介绍下如何使用配合来构建基于的前端项目。最后，在目录下会生成最终的项目文件。执行单元测试本例中使用进行单元测试。随着React、Angular2、Redux等前沿的前端框架越来越流行，使用webpack、gulp等工具构建前端自动化项目也随之变得越来越重要。鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目，网上的相关教程也比...

yuanxin 2019-08-19 18:05 评论0 收藏0
webpack组织模块的原理 - 打包Library

摘要：所以你编译后的文件实际上应当只输出，这就需要在配置里用来控制这样上面的模块加载函数会在返回值后面加一个，这样就只返回的部分。之前一篇文章分析了Webpack打包JS模块的基本原理，所介绍的案例是最常见的一种情况，即多个JS模块和一个入口模块，打包成一个bundle文件，可以直接被浏览器或者其它JavaScript引擎执行，相当于直接编译生成一个完整的可执行的文件。不过还有一种很常见的...

legendmohe 2019-08-22 15:15 评论0 收藏0
尝试造了个工具类库，名为 Diana

摘要：的另一种形式测试踩坑之路代码覆盖率单元测试的代码覆盖率统计，是衡量测试用例好坏的一个的方法。 showImg(https://segmentfault.com/img/remote/1460000012564211?w=640&h=280); 项目地址: diana文档地址: http://muyunyun.cn/diana/ 造轮子的意义为啥已经有如此多的前端工具类库还要自己造轮...

zhichangterry 2019-08-21 18:22 评论0 收藏0
[译] 用 ES6 构建新一代可复用 JS 模块

摘要：我们已经运用了的一些闪亮的新特性，那么如何才能转化为的代码呢首先，我们需要通过来安装在全局安装会提供我们一个命令行工具。你是不是也在为可以使用ES6的新特性而兴奋，却不太确定应该从哪开始，或者如何开始？不止你一个人这样！我已经花了一年半的时间去解决这个幸福的难题。在这段时间里 JavaScript 工具链中有几个令人兴奋的突破。这些突破让我们可以用ES6书写完全的JS模块，而不会为...

phpmatt 2019-08-19 17:35 评论0 收藏0
Vue源码之目录结构

摘要：运行时用来创建实例渲染并处理虚拟等的代码。基本上就是除去编译器的其它一切。版本可以通过标签直接用在浏览器中。为这些打包工具提供的默认文件是只有运行时的构建。为浏览器提供的用于在现代浏览器中通过直接导入。 Vue版本：2.6.9 源码结构图 ├─ .circleci // 包含CircleCI持续集成/持续部署工具的配置文件 ├─ .github ...

freewolf 2019-08-23 16:22 评论0 收藏0