美文网首页
如何利用babel工具将es6语法转换成es5语法

如何利用babel工具将es6语法转换成es5语法

作者: 梦无限嚣张 | 来源:发表于2018-04-18 12:36 被阅读0次

一、很多同学疑问既然es6已经出来的了,为很莫写完es6语法还要把他转换成es5,这不是脱裤子放屁吗?


        ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

        Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。


二、新建工程初始化项目

1、新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src 、dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录)

2、在src目录下新建一个js文件(这里起名叫做index.js),里面输入es6的代码:

3. 初始化项目

1)打开终端命令提示符 进入工程目录(这里也就是es6文件夹)输入如下命令初始化项目:(这里用的npm,国内用户建议用cnpm不懂得可以移步至淘宝镜像使用)命令执行完成后会在根目录生成package.json文件。

npm  init 

2)打开我们可以看到里面的内容(可以根据自己的需要进行修改,比如我们修改name的值。)

三、全局安装babel工具

1)在终端中输入以下命令,

npm install -g babel-cli

2)虽然已经安装了babel-cli,只是这样还不能成功进行转换,我们还需要安装转换包才能成功转换。

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

3)安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。

四、新建.babelrc

在项目根目录新建(.babelrc)文件输入如图所示代码:

五、现在你可以尽情转换了

    终端输入如下命令:(babel  待转换路径/ --out-dir 转换后路径/

    我们这里是从src转换到dist目录下

babel src --out-dir dist

现在我们dist目录下面就生成了编译后的js我们打开看一下(大功告成)

是不是每次这样输入一大串命令感觉很麻烦?

通过修改package.json里面的别名来实现编译  修改(“build”:“babel src --out-dir dist”

以后你只需要如下命令就可以编译了(是不是感觉很简单呢)

npm run build

                                 如果你觉得此文章对你有帮助,多多评论点赞

相关文章

  • 有关babel的应用

    babel的作用将ES6的语法转成ES5 如何安装 babel-loader@7 指定loader的版本babel...

  • es6—>es5 babel

    index es6—>es5 babel __veblen 前端构建工具,内置解析es6语法,核心在于babel ...

  • babel使用

    babel是将es6语法转换为es5语法的一个工具 1.全局安装babel-cli 2.在项目根目录中创建pack...

  • 学习使用Babel把ES6语法转换成ES5

    新手学习使用Babel把ES6的语法转换成ES5的语法,记录下从环境的搭建到转换的过程。 1、对于Babel7的安...

  • webpack学习(2019/7/25-7/29)

    1.讲了什么 es6小复习 怎么用node读写文件? 怎么用babel将es6语法转换为es5语法? webpac...

  • 如何利用babel工具将es6语法转换成es5语法

    一、很多同学疑问既然es6已经出来的了,为很莫写完es6语法还要把他转换成es5,这不是脱裤子放屁吗? ECMAS...

  • Babel入门

    Babel 是一个工具集,主要用于将 ES6 版本的 JS 代码转为 ES5 等向后兼容的 JS 代码: 语法转换...

  • 将 ES6 代码转换成 ES5

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

  • 【webpack:loader】Babel

    babel介绍 Babel 是一个 JavaScript 编译器,可以把ES6的语法转为兼容浏览器的ES5语法; ...

  • 5.调试react-native项目

    安装babel: 一个能把ES6语法转成ES5的工具。 1.报错Strict mode does not allo...

网友评论

      本文标题:如何利用babel工具将es6语法转换成es5语法

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