1 安装工具babel-cli babel-preset-env browserify(webpack)
.babelrc配置
{
presets":["babel-preset-env"]
2 npx babel src/js -d dist/js
3 打包 npx browserify dist/js/app.js -o dist/bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模块化-babel转换ES6</title>
</head>
<body>
<script src="src/js/app.js" type="module">
//src/js/app.js
// import * as m1 from './m1.js';
// import * as m2 from './m2.js';
// import m3 from './m3.js';
// console.log(m1);
// console.log(m2);
// console.log(m3);
// console.log(m1.name);
// console.log(m1.add(3,5));
//
// console.log(m2.name);
// console.log(m2.sub(5,2));
//
// console.log(m3.name);
// console.log(m3.mul(3,5));
//
//src/js/m1.js
// export let name = 'm1';
//
// export function add(x, y) {
// return x + y;
// }
//src/js/m2.js
// let name = 'm2';
//
// function sub(x, y) {
// return x - y;
// }
//
// export{
// name,
// sub
// }
//src/js/m3.js
// export default{
// name: 'm3',
// mul:function (x, y) {
// return x * y;
// }
// }
//dist/index.html
//导入bundle.js
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具