zoukankan      html  css  js  c++  java
  • JS 模块化和打包方案收集

    1.这里想讨论的是拆分规则,不是在问哪个工具怎么使用。
    2.这里没有在想找正确答案,因为感觉这个问题要结合具体业务场景。

    随着项目开发越来越大,一开始代码全打包到一个文件的方式,让文件越来越大,接下来要做拆分,可具体的拆分规则又不是很熟悉,或者说,我没有一个很好的方案,所以想到这是一个值得讨论的话题,想提问的形式拿出来,请各位大神有这方面接触的分享一下自己的经验。

    这个问题有一定局限性,因为不同的业务场景,可能拆分方式还有不同,所以,可否想讨论的朋友能把具体的业务场景细说一下,再结合具体业务场景给出解决方案。

    已有 JS 模块化和打包方案收集

    博客分类: nodejs生态+grunt
    模块化方案

    RequireJS

    AMD 方案, 常用的 define 语法, 异步加载模块, 目前很多支持:

    官网 http://requirejs.org/
    Github https://github.com/jrburke/requirejs
    Getting started https://gist.github.com/willurd/6054834
    打包工具 http://jamjs.org/
    相似方案:

    ozjs: http://ozjs.org/cn/
    Browserify

    CommonJS 方案, 共用 NPM 部分平台无关的模块:

    官网 http://browserify.org/
    Github https://github.com/substack/node-browserify
    教程 http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify
    NPM npmjs.org
    Browserify 兼容 Node 模块引用语法和 Node 模块化文件加载方案,
    浏览器端运行前需要完成代码的合并, 并配合 SourceMap 进行调试.

    相似方案:

    commonjs-everywhere https://github.com/michaelficarra/commonjs-everywhere
    stitch https://github.com/sstephenson/stitch
    onejs https://github.com/azer/onejs
    gluejs https://github.com/mixu/gluejs
    SeaJS

    支付宝的前端加载器, 遵循 CMD 规范, 打包工具是 SPM.

    官网 http://seajs.org/docs/
    Github https://github.com/seajs/seajs/issues
    Why SeaJS http://cyj.me/why-seajs/
    官方模块 http://aralejs.org/
    打包工具 SPM http://docs.spmjs.org/
    第三方源 https://spmjs.org/
    相关方案:

    BravoJS https://code.google.com/p/bravojs/
    Component

    Node.js 社区另一个为前端优化的模块方案, 类似 Browserify, 但鼓励将 HTML/CSS 打包到模块.
    模块保存在 Github.

    模块列表 http://component.io/
    作者写的介绍 http://tjholowaychuk.com/post/27984551477/components
    Github https://github.com/component
    ES6

    ES6 Modules https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
    jspm.io http://jspm.io/
    JS 规范里制定的模块化方案, 浏览器实现还没, 不过有模块可以提供类似功能.

    es6-module-transpiler https://github.com/square/es6-module-transpiler
    my.js https://github.com/hax/my.js
    Modjs

    腾讯的.

    官网 http://madscript.com/modjs/
    Github https://github.com/modulejs/modjs
    AngularJS

    官网 http://angularjs.org/
    Github https://github.com/angular
    模块列表 http://ngmodules.org/
    Package Manager

    Bower

    来自 Twitter 的模块管理方案, 或者仅仅是包管理工具.. 模块直接从 Github 下载

    官网 http://bower.io/
    模块列表 http://sindresorhus.com/bower-components/
    相关方案:

    Yeoman http://yeoman.io/
    Ender

    官网 http://ender.jit.su/
    Volo

    官网 http://volojs.org/
    代码打包

    Linner

    Github https://github.com/SaitoWu/linner
    WebPack

    Github https://github.com/webpack/webpack
    Home Page http://webpack.github.io/#/home
    UMD

    Github https://github.com/umdjs/umd
    uRequire Documents http://urequire.org/quick-introduction
    方案的对比

    So, you want to use require() in the browser…http://blog.brianbeck.com/post/10667967423/node-js-require-in-the-browser
    NPM vs JAM, RequireJS vs Browserify vs Enderhttp://www.reddit.com/r/javascript/comments/vc9d9/npm_vs_jam_requirejs_vs_browserify_vs_ender/
    The State of Javascript Package Managementhttp://wibblycode.wordpress.com/2013/01/01/the-state-of-javascript-package-management/
    Front-End Package Manager https://github.com/wilmoore/frontend-packagers
    Package Managers: An Introductory Guide For The Uninitiated Front-End Developerhttp://tech.pro/tutorial/1190/package-managers-an-introductory-guide-for-the-uninitiated-front-end-developer

    大衣哥

    年度

    王小源

    帅总

    囧囧丸

    天佑

    流氓三金

    毕加索

    王冕

    风小筝

    利哥

    天佑

    天佑

     沈曼

  • 相关阅读:
    CodeForces Gym 100500A A. Poetry Challenge DFS
    CDOJ 486 Good Morning 傻逼题
    CDOJ 483 Data Structure Problem DFS
    CDOJ 482 Charitable Exchange bfs
    CDOJ 481 Apparent Magnitude 水题
    Codeforces Gym 100637G G. #TheDress 暴力
    Gym 100637F F. The Pool for Lucky Ones 暴力
    Codeforces Gym 100637B B. Lunch 找规律
    Codeforces Gym 100637A A. Nano alarm-clocks 前缀和
    TC SRM 663 div2 B AABB 逆推
  • 原文地址:https://www.cnblogs.com/icelab/p/6207359.html
Copyright © 2011-2022 走看看