美文网首页
node支持 es6

node支持 es6

作者: 7hihi | 来源:发表于2019-11-26 15:49 被阅读0次

    安装 babel

    vnpm install babel-cli -g
    

    新建一个babel的配置文件 .babelrc

    {
     "presets": []
    }
    

    新建一个demo文件夹,文件夹下新建 1.js

    const arr = [1, 2, 3];
    arr.map(item => item + 1);
    

    同时新建.babelrc配置文件

    {
     "presets": []
    }
    

    终端运行

    babel 1.js -o dist.js
    

    可以看见,在文件夹下,新建了一个dist.js,这就是babel转码后的文件
    但是,dist.js 目前是没有任何变化的,因为我们在配置文件里面没有声明转码规则,所以babel无法转码

    下一步是安装转码插件

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

    修改配置文件

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

    es2015可以转码es2015的语法规则
    stage-0可以转码ES7语法(比如async await)

    再次运行终端

    babel 1.js -o dist.js
    

    可以看见,箭头函数被转码了

    var arr = [1, 2, 3];
    arr.map(function (item) {
     return item + 1;
    });
    

    我们试下async await

    async function start() {
     const data = await test();
     console.log(data);
    }
    function test() {
     return new Promise((resolve, reject) => {
     resolve('ok');
     })
    }
    

    转码后的文件

    再试下 import export
    util.js

    export default function say() {
     console.log('2333');
    }
    

    1.js

    import say from './util';
    say();
    

    这次,要把1.js和util.js都转码,我们可以把整个文件夹转码

    babel demo -d dist
    

    新生成的dist文件夹下,就有转码后的文件。可以看见,转码后,仍然使用的是module.exportsCMD模块加载

    接下来,重点来了,来个了牛逼的插件。

    上面的转码其实有个缺陷,就是babel会默认把所有的代码转成es5,这意味着,即使node支持let关键字,转码后,也会被转成var
    我们可以使用babel-preset-env这个插件,它会自动检测当前node版本,只转码node不支持的语法,非常方便。

    npm install --save-dev babel-preset-env
    

    修改 .babelrc

    {
     "presets": [
      ["env", {
      "targets": {
       "node": "current"
      }
      }]
     ]
     }
    

    1.js

    class F {
        say() {}
    }
    const a = 1;
    

    转码后

    "use strict";
    
    class F {
        say() {}
    }
    const a = 1;
    

    可以看见,class和const并没有被转码,因为当前node版本支持该语法
    在实际项目中使用ES6语法

    Koa2需要Node v7.6.0以上的版本来支持async语法,同时,我们也想在Koa2中使用import模块化写法

    npm install --save-dev babel-register
    npm install koa --save
    

    新建一个文件夹app
    util.js

    export function getMessage() {
        return new Promise((resolve, reject) => {
            resolve('Hello World!');
        })
    }
    

    app.js

    import Koa from 'koa';
    import { getMessage } from './util'
    const app = new Koa();
    app.use(async ctx => {
     const data = await getMessage();
     ctx.body = data;
    });
    app.listen(3000);
    

    如果直接启动文件,肯定会报错

    node app
    

    我们需要一个入口文件,来转码
    index.js

    require("babel-register");
    require("./app.js");
    

    运行

    node index
    

    访问http://localhost:3000/可以看见页面了!
    babel-register是实时转码的,所以实际发布时,应该先把整个app文件夹转码

    babel app -d dist
    

    这次,只要启动dist下的app.js即可

    node app
    

    相关文章

      网友评论

          本文标题:node支持 es6

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