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

2015-11-18 16:09:03 +08:00
 xunuoi
这个 https://github.com/xunuoi/sails-babel

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

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

这两年前端变化太快了 跟不上节奏
xunuoi
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
2015-11-18 18:06:00 +08:00
@xunuoi Babel6 对于 async/await 的支持还是有点问题的吧?要不就是我没配置好,我在官方建了一个 issue ,感兴趣的也可以一起跟进下。 https://github.com/babel/babel-loader/issues/161
xunuoi
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
2015-11-18 18:13:19 +08:00
@xunuoi 好的,也可能我这边配置太多了,互相影响了,我再看看。
xunuoi
2015-11-18 18:13:59 +08:00
前端用 async 的话,需要额外引入 babel/polyfill 这个东西,编译后也会打包进 js 文件~~建议前端启用 async 慎用
nigelvon
2015-11-18 18:15:06 +08:00
@liuxey 不加分号是邪教,我一直都坚持加分号。
xunuoi
2015-11-18 18:16:05 +08:00
@wangxiao2015 恩你找下 webpack 相关的吧,看看有没有解决~我记得 webpack 打包有个问题,不支持在一个 html 中多模块打包(输出多个模块包),在 google 上搜索后,发现 webpack 是不支持的,不知道现在增加支持了没
xunuoi
2015-11-18 18:17:29 +08:00
@nigelvon 哈哈、我现在不用分号了,外加 es6 引用了很多 python 语法,比如 yield 、 import 、 async 、 await 、修饰符等,写的 ES6 的代码,乍一看跟 Python 似得。。。
longaiwp
2015-11-18 20:10:26 +08:00
@xunuoi C#开始进军 JS 了啊,一看到 async 和 await 我还以为这里是写 C#的呢
ChiangDi
2015-11-18 20:54:03 +08:00
坚持不加分号。
xunuoi
2015-11-19 09:36:30 +08:00
@longaiwp 哈哈~ JS 现在新版语法,啥都借鉴,好的特性都借鉴,比如 python 的修饰器神马的~~ 其实语言特性都是皮毛,很多语言都是想通的,核心还是各种算法、解决方案、思路等~
longaiwp
2015-11-19 20:27:13 +08:00
@xunuoi 嗯,借鉴好了就是好的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/237087

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX