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

    大衣哥

    年度

    王小源

    帅总

    囧囧丸

    天佑

    流氓三金

    毕加索

    王冕

    风小筝

    利哥

    天佑

    天佑

     沈曼

  • 相关阅读:
    lsof命令详解
    nmap命令详解
    ss命令详解
    netstat命令详解
    ifup,ifdown命令详解
    playbook部署nginx
    cento7忘记root密码怎么办
    正确关闭selinux
    使用ssh-agent管理私钥
    gitlab中的CI
  • 原文地址:https://www.cnblogs.com/icelab/p/6207359.html
Copyright © 2011-2022 走看看