es6 模块化-babel转换ES6
Posted 天行子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es6 模块化-babel转换ES6相关的知识,希望对你有一定的参考价值。
模块化-babel转换ES6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模块化-babel转换ES6</title>
</head>
<body>
<script src="src/js/app.js" type="module">
//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
//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>
以上是关于es6 模块化-babel转换ES6的主要内容,如果未能解决你的问题,请参考以下文章