ES6转ES5
2019-05-17 16:31
239 查看
ES6转ES5
一.ES6简介
ECMAScript2015,更新语法、规则、功能
浏览器对ES6的支持程度并不是很好,如果写了ES6的代码,需要运行在浏览器上的时候,需要将ES6的代码转成ES5的代码去浏览器上运行。
NodeJS平台是可以支持绝大部分的ES6的新内容。
二.安装nodejs
可以在我的云盘下载:https://pan.baidu.com/s/1jKKPefEwSlxoOQ7xRpHRGg
提取码:0ojn
在终端运行,查看是否出现版本号是否运行成功。
> node -v > npm -v
Node.js js解析器 类似JVM ;
三.将ES6的代码转换成ES5的代码
转换工具:
babel-cli
转换规则:
babel-preset-es2015 babel-preset-env babel-preset-latest
1.安装需要的工具
安装转换工具:
>cnpm install -g babel-cli-g 全局安装 没有-g 本目录安装
安装转换规则:
>cnpm install -g babel-preset-es2015
2.创建根目录,并在根目录下创建src目录和dist目录
src目录用于存放并编辑ES6代码, dist目录用于存放解码后的代码
3.执行npm init -y,初始化成一个node项目,一路回车生成package.json
4.在项目根目录底下创建一个.babelrc文件,用来配置babel转换
{ "presets":["es2015"] }
5.转换
转换文件babel a.js --out-file b.js 转换目录babel src --out-dir dist
高级转换
创建文件夹,进入文件夹
1.npm init -y 创建node项目会有一个package.json文件,这里面有项目所要下载的包记录。
2.下载依赖cnpm install --save-dev babel-clicnpm install --save-dev babel-preset-es2015 --save-dev 开发阶段用到的依赖 --save 产品阶段用到的依赖3.在项目根目录底下创建一个.babelrc文件,用来配置babel转换
{ "presets":["es2015"] }4.转换
babel a.js 转换文件: babel a.js --out-file b.js 转换目录: babel src --out-dir dist babel 2-const.js --out-file 2-babelConst.js当没有node_modules的时候,可以参照package.json。使用cnpm install3.
在package.json中
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”:“babel src --out-dir dist”
},
在项目cmd中直接运行 npm run build ,相当于运行:babel src --out-dir dist
相关文章推荐
- 使用gulp ES6转ES5
- gulp配置es6转es5
- ES6转ES5:Gulp+Babel
- webstorm 上通过babel将es6转es5
- es6转es5
- Babel神器ES6转ES5
- gulp自动化ES6转ES5
- ES6转ES5使用babel
- ES6转ES5,javascript--第一季
- es6转es5
- ES6转ES5,javascript---第三季之浅谈对象
- es6转es5
- 简单利用gulp-babel搭建es6转es5环境
- ES6转ES5
- gulp-babel,es6转es5
- webStorm配置es6转es5
- webpacak将ES6转ES5
- webpacak将ES6转ES5
- babel es6转es5
- es6转es5在线工具