Babel详解

简介

ES6的某些高级语法在浏览器环境甚至是Node.js中无法执行
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

安装

安装命令行转码工具

npm install -g babel-cli

检查是否安装成功

babel --version

Babel的使用

创建bable文件夹
初始化项目

npm init -y

创建文件夹src
在文件夹src中创建文件example.js，并写下面的ES6代码

//转码前
let input =[1,2,3]
//将数组的每个元素加1
let input=input.map(a=>a+1)
console.log(input)

在根目录中创建.babelrc文件，配置.babelrc（Bable的配置文件是.babelrc，存放在根目录下，该文件用来设置转码规则和插件，基本格式如下）

{"presets":["es2015"],//这是将es2015规则加入"plugins":[]
}

安装转码器，在这个项目中安装（cmd中输入命令行）

npm install --save-dev babel-preset-es2015

转码

babel src -d dist

前端模块化开发

简介

随着网站逐渐变成“互联网应用程序” ，嵌入网页的javascript代码越来越庞大，越来越复杂，javascript模块化编程已经成为一个迫切的需求
模块化规范
- CommonJS模块化规范
- ES6模块化规范

CommonJS规范

创建文件—四则运算.js

//工具类
const sum = function(a,b){return a+b;
}
const sub = function(a,b){return a-b;
}
const mul = function(a,b){return a*b;
}
const di = function(a,b){return a/b;
}//导出给别人使用，commomJS模块化开发
module.exports={sum,sub,mul,di
}
//需要导出才能使用

创建文件----导入测试.js

//require 导入
const m = require('./四则运算.js');
let c=m.sum(1,2);
console.log(c);
console.log(m.mul(1,2));
console.log(m.sub(1,2));
console.log(m.di(1,2));

commonJS使用 exports导出，require导入

ES6模块化规范

创建导出文件 --userApi.js

//普通写法
// //用export导出
// export function getList(){//     //在真实业务中，异步获取数据
//     console.log("获取数据列表");
// }// export function save(){//     //在真实业务中，异步获取数据
//     console.log("保存数据");
// }//新版写法，也最常见，将要导入的化为一个整体
export default{getList(){console.log("获取数据列表");},save(){//在真实业务中，异步获取数据console.log("保存数据");}
}

创建导入文件—userTest.js

//普通写法
//导入模块import//import {getList,save} from './userApi'//getList()//save()//新版写法，导入的所有模块作为一个整体（对象）import user from './userApi'user.getList()user.save()

nodejs默认不支持es6语法的 import，所以要降级，用bable，回顾之前bable如何使用
- 先初始化 npm init -y
- 根目录中创建文件夹 src，放业务代码
- 跟目录中创建bable配置文件----- .babelrc
```
{"presets": ["es2015"],"plugins": []
}
```
- 安装转码器
npm install --save-dev babel-preset-es2015
- 创建dist文件夹----在package.json中
```
  "build": "babel src -d dist"
```
- 运行脚本build npm run build ,然后会在dist中生成和src一一对应的转码后的文件
- 运行dist中的文件
node .\dist\userTest.js

Bable详解和前端模块化相关推荐

layUI前端框架使用详解_layUI前端框架视频教程
百度云网盘下载 ayUI前端框架使用详解_layUI前端框架视频教程课程目录: 1前言 2为什么要用layUI框架 3layer组件的引用方法 4layer组件的使用方法详解 5用layer组件快速 ...
layUI前端框架使用详解_layUI前端框架视频教程完整版
layUI前端框架使用详解_layUI前端框架视频教程课程目录: 1前言 2为什么要用layUI框架 3layer组件的引用方法 4layer组件的使用方法详解 5用layer组件快速开发一个表单验 ...
后盾人最新layUI前端框架使用详解_layUI前端框架视频教程
课程目录: 2为什么要用layUI框架 4layer组件的使用方法详解 6layDate组件的使用方法详解 8layUI的基础文件引用 10页面元素之动画.按钮 12页面元素之选项卡.进度条.表格 1 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
vscode中前端vue项目详解_web前端Vue项目实战-Music
上篇讲到vue的使用方法,今天这一篇介绍vue的实操,可以大家更加加固去学习web前端vue技术. 第一节 Music项目环境第一部分本届作业聊一聊React和Vue的区别老版本的项目环境如何创 ...
CSS选择器详解（前端系列1）
博客核心内容: ①标签(名字)选择器 ②ID选择器 ③类选择器 ④通配符选择器 ⑤优先级就近原则,同权重情况下样式定义最近者为准 ⑥多元素选择器 ⑦后代选择器(.outer p)==>向下找 ⑧ ...
【前端就业课第一阶段】HTML5 零基础到实战（六）表格详解
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加博主前端 ...
在HTML中marquee有什么作用,【HTML】HTML之marquee详解
该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: 以下是一个最简单的 ...
echart关系树状图_echart——关系图graph详解
VueEchart组件见上一篇 export default { data () { const title = { // show: true, //是否显示 text: "画布关系图&q ...
php pcntl fork使用,php中pcntl_fork详解
pcntl_fork()函数是php-pcntl模块中用于创建进程的函数.(不支持windows) 至于php_pcntl扩展如何安装开启这里就不介绍了,只分析pcntl_fork()这个函数本身. ...

Bable详解和前端模块化

Babel详解

前端模块化开发

Bable详解和前端模块化相关推荐

最新文章

热门文章