require语法在JS中显示not defined，以致于导入一些Node.js中的模块出现问题，虽然能在vscode终端使用node xxx.js语法运行，但无法在浏览器运行。为了解决这个问题，我使用了browserify对JS文件进行打包。

        首先先安装browserify。

npm install browserify -g

        以下是需要用到的JS文件以及所属的文件夹（这些JS文件和文件夹命名随意，但需要一个入口JS文件，我这里是以index.js文件作为入口文件）

         

        在入口文件中，可以使用require('./xxx.js')将其他需要进行打包的JS文件作为模块导入

const cellphone_API = require('./user_cellphone_API');

        以下是user_cellphone_API的其中一个要打包的函数的定义（由于处于在函数外的变量在打包之后无法使用，我将axios作为函数的一个变量，之后需要调用该函数时就通过入口JS文件多加一个axios参数传递即可）

exports.telephoneVerificationCode =
    async function (telephone, axios) {
        const res = await axios({
            url: '/captcha/sent',
            method: 'post',
            data: {
                phone: telephone
            }
        })
    }

         在exports完所有需要打包的函数之后，记得要在入口JS文件中require导入所有你需要打包的JS文件，之后在cmd中使用browserify进行模块封装。（ -o 的后面是目标文件）

D:\nodejs\cloudmusic>browserify cloudmusicAPI\index.js -o dist\app.js

         完成之后，在前端页面导入app.js即可

    <script type="module" src="./dist/app.js"></script>

        千万千万记得加  type="module"  ！！！否则会出现模块无法使用的各种奇怪的报错

---

        由于模块从外部无法访问，为了解决这个前端不能传递数据交给后端处理的问题，我是通过在index.js这个入口JS文件中定义一个变量，通过传递元素id给DOM，获取前端元素内容，最后赋值给该变量，直接定义一个匿名函数监听前端元素的事件。

        以下是我使用的一个例子

         而后端要更改前端元素的数据就比较简单，直接在入口JS文件通过DOM更改即可。