至于为什么要写这篇笔记,那当然是因为我踩坑踩到很绝望
第一步:初始化
npm init --yes
初始化之后会自动生成一个package.json的文件
第二部:下载babel
输入
npm i babel-cli babel-preset-env browserify -D
下载成功后会自动生成一个package-lock.json文件,也可在package.json中检查是否下载成功
- 要注意!需要获取管理员权限
不然的话…就会出现这种结果(555别问我怎么知道的)
第三步:转换
我原来模块化的js代码的路径是src/js, 此时把它转译陈babel的模式,并存放在dist/js中。这一步进行之后dist中的文件是会自动生成的
npx babel src/js -d dist/js
第四步:打包
同样地,在获取管理员权限的情况下,在该路径中输入:
npx browserify dist/js/app/js -o dist/bundle.js
输入之后会生成一个bundle.js文件,这个文件就是打包好的文件啦!
再回到html文件,给bundle.js的文件,就可以获取到模块化的几个文件中的内容啦~
我这里是打包了三个js模块化文件
耶!完成啦~