# 如何在html中使用npm模块？
# 背景
单位的j2ee系统现在需要升级前端一些功能，需要用到npm上的一些模块，由于系统基本上是用jsp开发的，无法前后端分离，用不了webpack等前端工具，所以需要用Browserify+uglify-js将npm库转换为html也能直接引用的bundle.js。
# 安装
安装Browserify和uglify-js
npm install -g browserify
npm install -g uglify-js
npm install -g esmify
npm install -g browser-resolve
# 创建npm工程
在本地创建一个npm工程，用默认设置
mkdir myproject
cd myproject
npm init
安装你需要用到的npm包，如我们项目需要用remark和remark-docx这两个库
npm install --save remark
npm install --save remark-docx
如果用到的npm包是纯esm模块，需要在package.json加入
"type": "module"
创建main.js在js中调用npm库，并导出到window
import { unified } from "unified";
import markdown from "remark-parse";
import docx from "remark-docx";
var processor = unified().use(markdown).use(docx, { output: "blob" });
//把库主程序引出到window上
window.myprocess = processor
# 打包bundle.js
browserify会将main.js用到的所有npm打包转换成浏览器环境也能使用的js，若项目有esm模块需要加上-p esmify参数，没有则不需要
browserify main.js -p esmify > bundle.js
browserify打包生成的bundle.js还比较大，需要将它压缩一下，这里我们使用uglifyjs进行压缩
uglifyjs bundle.js -m -o bundle-min.js -c
bundle-min.js就可以放在html用script标签引入了，建立一个test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script src="bundle-min.js"></script>
<script>
const text = "# hello world";
<!--window.myprocess就是我们导出的库主程序 -->
console.log(window.myprocess)
</script>
</body>
</html>
# 其他
uglifyjs其他参数说明
-o,--output 指定输出文件，默认情况下为命令行
-b,--beautify 美化代码格式的参数
-m,--mangle 改变变量名称（ex：在一些例如YUI Compressor压缩完的代码后你可以看到)a,b,c,d,e,f之类的变量，加了-m参数，uglifyjs也可以做到，默认情况下，是不会改变变量名称的）
-r,--reserved 保留的变量名称，不需要被-m参数改变变量名的
-c,--compress OK，主角登场了，这是让uglifyjs进行代码压缩的参数。可以在-c后边添加
一些具体的参数来控制压缩的特性，下文中会具体介绍。
--comments 用来控制注释的代码的