利用babel将es6转为es5

front-end

2019-02-19

137

0

第一种方法:

1.安装babel-cli(用于在终端使用babel) 

  npm install -g babel-cli

 

2.安装babel-preset-es2015插件

   npm install --save babel-preset-es2015

 

以上两步即可在终端运行babel  js文件名  来运行使用了es6语法的js文件

 

3.配置.babelrc,参考的下面的配置文件.babelrc

注意:此时的es6.js中不能通过import引入外部的文件,否则会报错:require is not define

因为babel只是个翻译,假设a.js 里 import 了 b.js,对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来,如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具,也就是webpack等工具了

 

第二种方法:

上面的代码是在全局环境下,进行babel转码。这意味着,如果项目要运行,全局环境必须有babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

  1. 在项目中安装

$ npm install babel-cli --save-dev

 

  1. 改写package.json。

{

  // ...

  "devDependencies": {

    "babel-cli": "^6.0.0"

  },

  "scripts": {

    "build": "babel es6.js -o es5.js"   //这里就是运行下面的babel常用命令

  },

}

  1. 转码的时候,就执行下面的命令。

 

$ npm run build   //代替了上面的babel es6.js -o es5.js

 

附Babel常用命令:

1、转换es6.js文件并在当前命名行程序窗口中输出

 

  babel es6.js

 

2、将es6.js转换后输出到es5.js文件中(使用 -o 或 --out-file )

 

  babel es6.js -o es5.js

 

  babel es6.js --out-file es5.js

 

3、实时监控es6.js一有变化就重新编译(使用 -w 或 --watch )

 

  babel es6.js -w --out-file es5.js

 

  babel es6.js --watch --out-file es5.js

 

4、编译整个src文件夹并输出到lib文件夹中(使用 -d 或 --out-dir )

 

  babel src -d lib

 

  babel src --out-dir lib

 

5、编译整个src文件夹并输出到一个文件中

 

  babel src --out-file es5.js

 

6、直接输入babel-node命令,可以在命令行中直接运行ES6代码

 

  babel-node

 

 

------------------------------------------------------------------------------------------------

 

配置文件.babelrc

{

    "presets": [

      "es2015",

      "react",

      "stage-2"

    ],

    "plugins": []

  }

或者

在package.json文件中配置

 "babel": {

     "presets": ["es2015"]

  }

 

安装:

# ES2015转码规则

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

 

# react转码规则

$ npm install --save-dev babel-preset-react

 

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个

$ npm install --save-dev babel-preset-stage-0

$ npm install --save-dev babel-preset-stage-1

$ npm install --save-dev babel-preset-stage-2

$ npm install --save-dev babel-preset-stage-3

参考文档:babel入门教程-阮一峰

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01