首页 > 其他分享 >babel对ES6的模块化代码转换

babel对ES6的模块化代码转换

时间:2023-02-20 16:12:05浏览次数:30  
标签:ES6 console log babel m2 js m1 模块化

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>

 

标签:ES6,console,log,babel,m2,js,m1,模块化
From: https://www.cnblogs.com/0722tian/p/17137772.html

相关文章

  • ES6模块化介绍
    模块化模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。模块化的好处模块化的优势有以下几点:1.防止命名冲突2.代码复用3.高维护性   ex......
  • ES6的对象方法扩展
     Object.assign对象的合并<script>//Object.assign对象的合并constconfig1={host:'localhost',por......
  • Es6 新增的字符串方法
    1.String.fromCodePoint()ES5提供String.fromCharCode()方法,用于从Unicode码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符。String.fromCharCode(0x2......
  • 10 分钟 学会 手写一个 简单的 Babel 插件 操作AST 语法树
    学习的背景(为啥要写一个Babel插件呢?)es6是如何转换为es5的?什么是AST语法树呢,怎样对一个AST树的节点进行增删改查呢?为啥之前jsx需要手动导入react,现在......
  • 前端模块化规范
    1.有哪些规范ES6、服务器端模块化规范:CommonJS、浏览器端模块化规范:AMD、CMD在ES6提出之前,JS社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范,这......
  • 【JS】简单复习及ES6
    一、JavaScript基础及ES6视频链接:https://www.bilibili.com/video/BV1Y84y1L7Nn 10.变量的声明var与let首先说结论,放弃var,使用let。let为了解决var的一些......
  • Node.js模块化 exports和module.exports的区别【转载】
    请牢记一条原则:无论使用exports暴露成员,或是module.exports暴露成员,最终暴露的结果,都是以module.exports所指向的对象为准。1.module对象看一下module对象长什么样......
  • Node.js 模块化 module.exports 和 exports 的使用【转载】
    1.模块作用域的好处防止全局变量污染的问题,如:两个JS文件都有命名一样的变量,变量只会在自己的js文件的作用域下才会有作用。2.module对象在每一个.js自定义模块中都有一......
  • 接口自动化测试思路和实战(2):模块化测试脚本框架
    模块化测试脚本框架需要创建独立的可描述的模块、程序片断以及待测试应用程序的脚本。这些小脚本进行组合,就能组成用来独立运行特定的测试的测试用例脚本。场景一:......
  • #yyds干货盘点#重新解读一下ES6的Set
    Set如果要用一句来描述,我们可以说: ​​​Set​​​是一种叫做集合的数据结构。​什么是集合?集合是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合......