npm中的js库很全面,但一般是用于node.js环境中的。
有些时候,我们想在浏览器环境中,直接使用npm的库,怎么办呢?
至少有两种方法:
- 方案1:走webpack等打包工具
- 方案2:走browserify
本文主要介绍方案2,browerify的方案更简单,很好操作。
1、安装browerify
cnpm install -g browserify
2、安装npm库
需要先通过npm安装下,比如这里,我们想使用这个库
cnpm i sm-crypto
3、编写适配脚本
main.js
var sm4 = require('sm-crypto').sm4 global.window.sm4 = sm4
4、执行browerify
browserify main.js -o bundle.js
生成的bundle.js就可以直接用了,我们看下用法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./bundle.js"></script> </head> <body> <div id="app1"></div> <div id="app2"></div> <script> let sm4 = window.sm4 const msg = 'hello world! .' const key = '0123456789abcdeffedcba9876543210' let encryptData = sm4.encrypt(msg, key) document.getElementById("app1").innerHTML = encryptData document.getElementById("app2").innerHTML = sm4.decrypt(encryptData, key) </script> </body> </html>
很好,点赞!