如何在浏览器中使用npm的js库(browserify)

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>

 

 

 

Leave a Reply

Your email address will not be published.