V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xunuoi
V2EX  ›  Node.js

分享一个全栈启用 ES6、7 的开发模式(后端 sails+前端+babel),用了 async 写异步,倍爽!

  •  1
     
  •   xunuoi · 2015-11-18 16:09:03 +08:00 · 8521 次点击
    这是一个创建于 3322 天前的主题,其中的信息可能已经有所发展或是发生改变。
    这个 https://github.com/xunuoi/sails-babel

    后端 sails ,用了一个 babel 的 hook 来启用 ES6\7 特性,具体配置可以去查询 babel~
    前端用了 babel+browserify+scss 等~~

    感觉还不错,开发体验倍爽!可以直接 async 来写异步了,再不用 N 多回调!
    不过搭建起来还是有点折腾的~~
    第 1 条附言  ·  2015-11-18 18:26:06 +08:00
    附上配套的搭建和使用 sails-bable 的教程: http://karat.cc/article/562f6f53d6db69011de1bbe0
    github: https://github.com/xunuoi/sails-babel
    第 2 条附言  ·  2015-12-31 11:51:28 +08:00
    babel 6 这段时间发布了,改成做平台+插件的方式了。。。。汗
    ES6 的童鞋们准备好再次折腾吧
    29 条回复    2015-11-26 17:22:50 +08:00
    xunuoi
        1
    xunuoi  
    OP
       2015-11-18 16:22:01 +08:00
    P.S : 这个前端的资源构建是基于 gulp 构建的,比 grunt 那套简单、清爽好多
    xunuoi
        2
    xunuoi  
    OP
       2015-11-18 16:25:19 +08:00
    附上配套的搭建和使用 sails-bable 的教程: http://karat.cc/article/562f6f53d6db69011de1bbe0
    wangxiao2015
        3
    wangxiao2015  
       2015-11-18 16:29:43 +08:00
    麻烦测试一下,前端通过 babel 支持 async/await 么?后端倒是很容易支持。
    robertlyc
        4
    robertlyc  
       2015-11-18 16:36:29 +08:00
    这个世界已经进化到 webpack 都快过时了 呵呵
    wangxiao2015
        5
    wangxiao2015  
       2015-11-18 17:09:59 +08:00
    @robertlyc Webpack 可以和 babel-loader 用, Babel 官方支持的。构建工具无所谓过不过时,关键是好不好用。比如 Gulp 比 Grunt 明显好用很多,那就迁移到 Gulp 。但是 Browserify 和 Webpack 差不多,所以就无所谓迁移。
    liuxey
        6
    liuxey  
       2015-11-18 17:28:17 +08:00   ❤️ 3
    有一次看到一同事句尾从来不写分号,
    我就问他为什么这么做,他说标准就是不加,
    然后我尝试着更改自己的习惯终于也不加分号,
    过了一段时间发现同事句尾都又加分号了,
    我又问了,他说现在流行加
    mgcnrx11
        7
    mgcnrx11  
       2015-11-18 17:36:26 +08:00
    @liuxey 哈哈哈哈
    liuzhen
        8
    liuzhen  
       2015-11-18 17:51:38 +08:00
    根本看不懂你们在讨论什么。

    这两年前端变化太快了 跟不上节奏
    xunuoi
        9
    xunuoi  
    OP
       2015-11-18 18:05:20 +08:00
    @wangxiao2015
    通过 babel 都可以使用的,在 gulp 文件中配置你想要的特性就可以:

    var babelOptional = [
    "es7.asyncFunctions",
    "es7.objectRestSpread",
    "es7.functionBind",
    "es7.comprehensions",
    ]

    完整代码戳: https://github.com/xunuoi/sails-babel/blob/master/assets/gulpfile.js 和 教程 http://karat.cc/article/562f6f53d6db69011de1bbe0

    当然先去熟悉下 babel 再搞起比较好: babeljs.io
    wangxiao2015
        10
    wangxiao2015  
       2015-11-18 18:06:00 +08:00
    @xunuoi Babel6 对于 async/await 的支持还是有点问题的吧?要不就是我没配置好,我在官方建了一个 issue ,感兴趣的也可以一起跟进下。 https://github.com/babel/babel-loader/issues/161
    xunuoi
        11
    xunuoi  
    OP
       2015-11-18 18:11:28 +08:00
    @wangxiao2015
    你看下你发的那个 github , 这个 babel-loader 是 Webpack plugin for Babel ,是个 Webpack 的,所以不清楚这个支持的怎么样~~ 我分享的这个是 gulp 的,需要配置好 polyfill ,然后在前端 ES6 文件中,额外 import 一下,这样就完全支持 es6\7 的 async 、 generator 等特性,亲测试过了丫,可以用滴~~要不你再看一下你的配置和官方文档
    wangxiao2015
        12
    wangxiao2015  
       2015-11-18 18:13:19 +08:00
    @xunuoi 好的,也可能我这边配置太多了,互相影响了,我再看看。
    xunuoi
        13
    xunuoi  
    OP
       2015-11-18 18:13:59 +08:00
    前端用 async 的话,需要额外引入 babel/polyfill 这个东西,编译后也会打包进 js 文件~~建议前端启用 async 慎用
    nigelvon
        14
    nigelvon  
       2015-11-18 18:15:06 +08:00
    @liuxey 不加分号是邪教,我一直都坚持加分号。
    xunuoi
        15
    xunuoi  
    OP
       2015-11-18 18:16:05 +08:00
    @wangxiao2015 恩你找下 webpack 相关的吧,看看有没有解决~我记得 webpack 打包有个问题,不支持在一个 html 中多模块打包(输出多个模块包),在 google 上搜索后,发现 webpack 是不支持的,不知道现在增加支持了没
    xunuoi
        16
    xunuoi  
    OP
       2015-11-18 18:17:29 +08:00
    @nigelvon 哈哈、我现在不用分号了,外加 es6 引用了很多 python 语法,比如 yield 、 import 、 async 、 await 、修饰符等,写的 ES6 的代码,乍一看跟 Python 似得。。。
    longaiwp
        17
    longaiwp  
       2015-11-18 20:10:26 +08:00
    @xunuoi C#开始进军 JS 了啊,一看到 async 和 await 我还以为这里是写 C#的呢
    ChiangDi
        18
    ChiangDi  
       2015-11-18 20:54:03 +08:00
    坚持不加分号。
    xunuoi
        19
    xunuoi  
    OP
       2015-11-19 09:36:30 +08:00
    @longaiwp 哈哈~ JS 现在新版语法,啥都借鉴,好的特性都借鉴,比如 python 的修饰器神马的~~ 其实语言特性都是皮毛,很多语言都是想通的,核心还是各种算法、解决方案、思路等~
    longaiwp
        20
    longaiwp  
       2015-11-19 20:27:13 +08:00
    @xunuoi 嗯,借鉴好了就是好的
    xunuoi
        21
    xunuoi  
    OP
       2015-11-19 22:12:57 +08:00
    @longaiwp 取各语言精华
    xunuoi
        23
    xunuoi  
    OP
       2015-11-20 13:17:31 +08:00
    @magicdawn TJ 在评论里 只是偏主观的觉着 babel 来编译有点麻烦、使人疑惑,想等到 async/await 在 node 原生支持后再用到他的框架中,但其实没有讲用 babel 的实际缺点(比如性能、维护性等),他不用 babel 在 sever 端也没讲原因~~ 其实 babel 编译后的代码,是优化的,比如启用 babel 的闭包清除插件后,会将闭包函数修改成普通函数+传参的形式,这个对 V8 等引擎中运行是有性能提高的~~
    magicdawn
        24
    magicdawn  
       2015-11-20 13:25:36 +08:00
    @xunuoi 反正我要 yield
    xunuoi
        25
    xunuoi  
    OP
       2015-11-20 20:43:40 +08:00
    @magicdawn 哈哈,其实我也喜欢 yield+generator ,会更清楚代码的原理和流程 : )
    klesh
        26
    klesh  
       2015-11-21 11:02:41 +08:00
    调试会很麻烦吧?能不能反馈原始代码的行数。
    xunuoi
        27
    xunuoi  
    OP
       2015-11-21 17:06:00 +08:00 via iPhone
    @klesh 必须能啊!支持的
    flw01
        28
    flw01  
       2015-11-25 17:24:12 +08:00
    我们现在在招 node.js,坐标广州,感兴趣的私聊我, http://www.lagou.com/jobs/1284459.html
    0rangeT1ger
        29
    0rangeT1ger  
       2015-11-26 17:22:50 +08:00
    @wangxiao2015 可以支持的, babel 5.8.x 加个 require("babel/polyfill");就行.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   838 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:30 · PVG 05:30 · LAX 13:30 · JFK 16:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.