美文网首页
如何用babel来编译ES6的代码

如何用babel来编译ES6的代码

作者: cb12hx | 来源:发表于2017-03-08 19:58 被阅读0次

1.安装基本的依赖

npm i babel-cli babel-core babel-preset-es2015 babel-preset-stage-0

2.创建.babelrc来定义编码规范

{
  "presets": ["es2015", "stage-0"]
}

3.用ES6编写一个helloWorld.js,并且编写一个index.js来调用这个helloWorld.js

helloWorld.js

export default function Test(){
    console.log(123)
}

index.js

import index from './index.js'
console.log(index)

4.使用babel来进行转码

babel index.js --out-dir ./build

5.生成的代码

'use strict';
var _index = require('./index.js');
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_index2.default);

6.结论

从生成的代码来看,里面还有require之类的,可以在node环境中执行看看效果,但是在执行的时候,helloWorld的代码并没有转换,直接报错了,所以,这只是用来转换单个文件使用的,建议还是采用webpack来进行转码,直接可以用在html中
注:有兴趣的同志可以试试转化以下代码

let arr=[1,2,3]
arr.map((ele)=>{
    console.log(ele)
})

相关文章

  • Webpack和Babel

    Babel Babel 是 JavaScript 的编译器,用来将 ES6 的代码,转换成 ES6 之前的代码 官...

  • 如何用babel来编译ES6的代码

    1.安装基本的依赖 2.创建.babelrc来定义编码规范 3.用ES6编写一个helloWorld.js,并且编...

  • 第三章:实战(深入浅出 Webpack 笔记)

    使用 ES6 语言 Babel 是一个 JavaScript 编译器,能将 ES6 代码转为 ES5 代码。在 B...

  • 17.babel

    babel的工作流: parsing 将es6代码编译为ASTtransforming() 调用转化插件,...

  • 从零开始写一个 Babel 插件

    相信目前常与 ES6 代码打交道的同学对 Babel 应该不会陌生,在 ES6 代码被编译转化为 ES5 代码的过...

  • babel

    babel的工作流: parsing 将es6代码编译为ASTtransforming 调用转化插件,将...

  • 用babel-registor编译es6代码报错问题

    尝试用babel-register来编译一段es6代码,其中包含有import语法,按照网上教程老是出错:unex...

  • webpack基础(九) Babel处理js

    什么是babel? Babel是JavaScript编译器,能将ES6代码转换成ES5代码,让我们开发过程中放心使...

  • gulp构建es6项目

    项目构建介绍 ES6 项目构建 基础架构 任务自动化(gulp) 编译工具(babel、webpack) 代码实现...

  • 将 ES6 代码转换成 ES5

    本文介绍用Gulp和Babel 6来将 ES6 代码转换成 ES5 代码。 如果用其他工具配合 Babel 来做,...

网友评论

      本文标题:如何用babel来编译ES6的代码

      本文链接:https://www.haomeiwen.com/subject/xshigttx.html