Babel

他出现的原因就是很多浏览器还未完全兼容ES6 需要将你写的ES6的内容转换成ES5让浏览器兼容运行

ES5和ES6相比出现很多新内容

比如拼接字符串

ES6可以` ` 里面如果引用变量就用${str}引入

http://kangax.github.io/compat-table/es6/

Bable怎么用

看官方文档

https://babeljs.io/docs/

比如我们想把我们用ES5写的nodeserver改成ES6的

var http = require('http');

var PORT = ;

function handleRequest(req, res) {
res.end(`It Works!! Path Hit: ${req.url}`);
} var server = http.createServer(handleRequest); server.listen(PORT, function() {
console.log('Server listening on: http://localhost: %s', PORT);
});

如果你

他是从

来的

ES6是怎么写的呢?

import http from 'http';
// var http = require('http');

const PORT = 8080;

http.createServer((req, res) => {
res.end(`It Works!! Path Hit: ${req.url}`);
}).listen(PORT, ()=>
console.log('Server listening on: http://localhost: %s', PORT);
});

运行发现

那么怎么用呢?看官网https://babeljs.io/docs/en/usage

但是 这仅仅是安装了

还要用 要弄个类似点火装置

就是让你的ES6文件加入这个点火装置里面 这样才表示 你这个文件用了我们安装的babel

然后还会要写个文件

然后我们运行

week05 codelab01 Babel ES6 webpack Nodejsserver等的更多相关文章

  1. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  2. reactjs学习一(环境搭配react+es6+webpack热部署)

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  3. babel tsc webpack

    我要用啥?js的话:babel编译+webpack模块打包ts的话:tsc编译成js+babel编译+webpack模块打包浏览器情况:如果您的浏览器支持es6所有语法那么就可以只用webpack来处 ...

  4. 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)

    #高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack )   ##demo [demo 地址](http://liangxiaojuan.github.io/ ...

  5. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  6. ES6+Webpack 下使用 Web Worker

    大家都知道 HTML 5 新增了很多 API,其中就包括 Web Worker,在普通的 js 文件上使用 ES5 编写相关代码应该是完全没有问题了,只需要在支持 H5 的浏览器上就能跑起来. 那如果 ...

  7. 使用babel es6 转 es5

    安装 //Webpack 接入 Babel 必须依赖的模块 npm i -D babel-core babel-loader //preset,告诉babel编译的文件中用到了哪些语法env包含当前所 ...

  8. ES6项目构建(babel+gulp+webpack)

    (一)基础架构 (二)任务自动化(gulp) (三)编译工具(babel,webpack) (四)代码实现 一.基础构架 1.app : 放置前端代码 css : css文件 js : js文件 cl ...

  9. ES6+Webpack+Babel基本环境搭建

    ### 本文基本是流水文,记录学习中步骤,希望对看到的你有用,蟹蟹. 基本环境搭建 技术栈 Webpack ES6 Babel 开发环境 VS Code Node 搭建环境过程 新建项目文件夹

随机推荐

  1. spring 事务传播机制

    spring 事务 传播机制 描述的 事务方法直接相互调用,父子事物开启,挂起,回滚 等的处理方式. 绿色的 那几个 我认为比较重要. 1 , @Transactional(propagation=P ...

  2. 1、Nexus安装

    1.nexus 下载地址: https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.14.5-02-bundle.tar.g ...

  3. 收藏品:MP3播放器

    大三下学期的时候,有一段生活激情似火. 那时候,我在外边接了项目,把宿舍的哥们儿都组织了起来,一起开发赚钱.我们在小区里租了房子,又多借了一台电脑,哥几个轮流上阵写代码.准备考研的兄弟也帮手做饭,我和 ...

  4. 使用Dockerfile创建镜像

    Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile来快速创建自定义的镜像. 一.基本结构 Dockerfile由一行行命令语句组成,并且支持以#开头的注释行. 一般而言,D ...

  5. sql 查询结果自定义排序

    sqlserver 使用case when then 语句来实现 select name from fruit order by case name end oracle 使用decode实现 ,,, ...

  6. .net 多线程之async await

    主线程遇到await 关键字后就交给子线程执行了 先定义一个task 可以让主线程和子线程同时执行,通过await关键字可以让主线程等待子线程执行完毕,await后面的代码可以视为异步方法的回调,可以 ...

  7. AX2012 ERP “系统慢”调优---跟踪SQL执行,优化代码

    对于用户来说,系统是:慢的,难用的.你看xxx,多好用,多快,多人性化. 对于AX ERP系统也不例外,调优是必须的,调优一般分为几种: 系统性监测针对瓶劲环节提升,如:用户--应用服务器--DB-- ...

  8. ibatis.net 循环

    if (oReqV[0]["tag"] != null && !string.IsNullOrEmpty(oReqV[0]["tag"].ToS ...

  9. 初识SEO

    一.什么是SEO 1.SEO 搜索引擎优化(Search Engine Optimization)指通过对网站进行站内优化和修复(网站Web结构调整.网站内容建设.网站代码优化和编码等)和站外优化,从 ...

  10. Android 开发 存储目录的详解

    简介 Android设备,有3个地方的文件存储位置,他们分别是: 内部存储空间(用户无法浏览到此目录) 外部存储空间(就是手机自身的文件管理目录,用户可以浏览) SD卡的存储空间(需要插入T卡) Sh ...