V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Yliuxx
V2EX  ›  JavaScript

amd-vs-commonJS-vs-es6-coffeescript 傻傻分不清

  •  
  •   Yliuxx · 2016-04-14 15:25:12 +08:00 · 3057 次点击
    这是一个创建于 3131 天前的主题,其中的信息可能已经有所发展或是发生改变。

    近期对 js 比较感兴趣,就开始研究;有以下问题不是很明白,求指点。

    • amdcommonJSes6coffeescript对比分析;比如: amdcommonJS使用requirees6中使用import进行module引入,各有什么不同;
    • 当我使用npm安装对应的js module之后, 怎么加载使用,怎么使用脚手架工具(module handler)将他们打包为普通的js,提供给浏览器使用,提供给其他人调用。
    • 有什么办法解决他们之间的混用;比如使用 webpack 这些脚手架工具(module handler), 将coffeescript写的代码和es6进行对接;
    7 条回复    2016-04-15 10:16:42 +08:00
    Yliuxx
        1
    Yliuxx  
    OP
       2016-04-14 15:44:01 +08:00
    自己的一些理解
    #CommonJS
    服务器端的 Node.js 规范,允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口。不适合在浏览器环境中,同步意味着阻塞加载,会造成浏览器假死;
    #AMD
    适合在浏览器环境中异步加载模块,在声明模块的时候指定所有的依赖 dependencies ,使用 CommonJS 浏览器端的一种妥协方案。
    #EcmaScript6
    新的 EcmaScript 标准; 编译时就能确定模块的依赖关系,以及输入和输出的变量。 CommonJS 和 AMD 模块,都只能在运行时确定这些东西。好多浏览器还是没有支持, 需要使用 babel 编译为 JavaScript 5 。
    learnshare
        2
    learnshare  
       2016-04-14 15:55:28 +08:00   ❤️ 1
    System.js 比较好的解决了各种模块、语言之间的混合开发
    Yliuxx
        3
    Yliuxx  
    OP
       2016-04-14 16:21:32 +08:00
    coffeescript 的一种叫法: JavaScript 的方言, 感觉好贴切。
    iugo
        4
    iugo  
       2016-04-14 17:31:27 +08:00   ❤️ 1
    AMD, CommonJS 都是模块化的规范, 这些都是在 ES6 之前的东西. 本质上没有什么不同, 语法而已, 建议使用 ES6 的语法.

    我觉得楼主对 JavaScript 的模块还不够理解. 我有个工程 A, 引用了 npm 中安装的 B, 然后引用了自己以前写的 C 的部分功能. Webpack 从 A 开始打包, 它帮我自动引入了 B 和 C 的相关功能. 在 A 中这样引用就行:

    import B from 'B'
    import C from './C.js'

    ---

    JavaScript 的一个特殊的地方就是有 "polyfill". 语言太灵活了, 你可以自己构建语法, 翻译到 JavaScript 就行. 方言这种说法也挺贴切, CoffeeScript 是方言, TypeScript 是方言, 可以说 ES6 也是方言. 只要每种方言不写在一个文件中, 就很好对接.
    Yliuxx
        5
    Yliuxx  
    OP
       2016-04-14 18:13:26 +08:00
    @iugo 非常感谢,您的指点; 可不可以这样理解, coffeescript 这些方言不要混写到同一个文件中; gulp 这类编译工具,将他们统一编译为.js 的普通话, 最后再由 webpack 把这些 js 的普通话组织压缩在一起。当然 webpack 自己可以进行编译工作。
    iugo
        6
    iugo  
       2016-04-15 09:38:36 +08:00
    @Yliuxx 可以这样理解. Webpack 是个打包器, 许多功能是一些 modules 帮着实现的, Sass 转 CSS, 热加载什么. 它就是个平台.
    Yliuxx
        7
    Yliuxx  
    OP
       2016-04-15 10:16:42 +08:00
    @iugo 太感谢了, 经过您的指导,重新梳理了下思路,现在又进一步理解。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2605 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 05:21 · PVG 13:21 · LAX 21:21 · JFK 00:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.