用babel转码ES6

首先可以用es-checker检测一下本机对ES6的支持程度

npm install -g es-checker && es-checker

可见,不支持ES6的import和export语法,我们可以写个有该语法的脚本运行下。

创建项目文件夹,结构如下:

lib.js:

export var a = 10;

main.js:

import { a } from ‘./lib‘;
console.log(a);

执行  node main.js

发现确实无法执行。此时我们可以用babel进行转码:

首先安装label-cli

npm install -g babel-cli

再在项目文件夹先创建  .babelrc  文件

安装转码规则:

npm install --save babel-preset-latest

然后写入到  .babelrc  文件中

{
	"presets": [
		"latest"
	]
}

执行  babel main.js  即可查看转码之后的代码,也可以输出到文件中:

babel main.js -o out.js

就可以写入到out.js中,然而我们这里有两个文件在同一文件夹下,我们可以直接将文件夹转码

babel test -d src

即可将test文件夹下的文件转码到src文件夹下。

转码成功后的目录结构如下:

转码后的main.js:

‘use strict‘;

var _lib = require(‘./lib‘);

console.log(_lib.a);

lib.js:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var a = exports.a = 10;

转码成功,用node执行转码后的文件:

ok。

原文地址:https://www.cnblogs.com/qmdx00/p/9425192.html

时间: 2024-10-10 06:56:04

用babel转码ES6的相关文章

babel转码es6具体说明

之前一直vue脚手架直接就建立了webpack很多东西都是自主转码的,今天仔细查看了一下babel,发现了这个还是有很多需要研究的东西. 1.babel-node babel-cli工具自带的babel-node命令,提供一个支持es6的REPL环境.支持在node的REPL环境的所有功能.可以直接运行ES6代码 2.babel-register 改写require命令,可以直接require在加载.js .jsx .es .es6 后缀名的文件,会事先用Babel进行转码 3.babel-co

常见的ES6转码(编译)工具——Babel转码器、Traceur转码器

在浏览器里面如何使用?现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法当ES6不兼容时,需要用到转码工具1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持. // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 上面的原始代码

Babel 转码器 § es6转换es5

Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方

ES6入门一:ES6简介及Babel转码器

ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什么关系? 1996年11月,JavaScript的创造者——Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望JavaScript这种语言能够成为国际标准. 1997年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言

babel转码时generator的regeneratorRuntime

今天写generator函数时发现出错:regeneratorRuntime. 在stackoverflow网友说需是本地babel软件包没有安装完全. package.json: "devDependencies": { "babel-core": "^6.0.20", "babel-polyfill": "^6.0.16", "babel-preset-es2015": "

1.Babel转码器

为什么要使用Babel? 在当代环境中虽然对ES6的支持越来越好,但是大多数还是不支持ES6,这时候我们就需要把已经写好的ES6代码转换成ES5,而Babel就是将ES6转化成ES5的转码器,被广泛使用. 举个栗子: // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 配置文件 .babelrc .babelrc是babel的配置文件,放在项目的根目录下,比如现有的

Babel下的ES6兼容性与规范

ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题. 一.兼容性问题现状 针对ES6的新特性兼容性问题,目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法,通用的转化方案有babel,traceur,jsx,typescript,es6-shim.当然es6在服务器端也存在兼容性问题,这里由于只考虑到浏览器端的开发,

使用babel转码器,让浏览器支持es6语法

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascript,Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码.在babel的安装设置里我选用的是使用node 来进行安装. 1.在你的项目下输入命令: npm install --save-dev babel-core 按回车健,运行如下: 2.配置文件.babelrc 在项目根目

es6 babel转码器安装配置

例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js.(iOS系统里安装的,windows还没安装过) 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cli,输入命令 sudo npm install babel-cli -g (windows去掉sudo) 2.输入cd Desktop/es6 ; ---(进去文件夹) 3.输入 npm init: 一路回车键 ---(引导你创建一个package.json文件,包括名称.版本.作者这