`
zccst
  • 浏览: 3322326 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多
模块化方案

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
分享到:
评论

相关推荐

    phpweb的21种模块打包

    在PHPWeb开发中,模块化设计是提升代码可维护性和扩展性的重要手段。"phpweb的21种模块打包"提供了丰富的功能模块,方便开发者根据项目需求选择和整合。下面将详细阐述这些模块的功能和应用场景。 1. **news**:...

    高粒度模块化的前端开发

    早期的JavaScript模块化尝试包括CommonJS和AMD规范,它们分别适用于服务器端和浏览器端的模块加载。然而,这些规范存在一定的局限性,如异步加载的复杂性、模块依赖解析的不透明等。为了克服这些挑战,ES6模块被引入...

    javascript模块化是什么及其优缺点介绍

    JavaScript模块化是现代Web开发中不可或缺的一部分,随着前端技术的快速发展,如Backbone、Ember.js、Spine.js和Batman.js等MVC框架以及CommonJS、AMD、Node.js、RequireJS、SeaJS和curljs等模块化解决方案的普及,...

    JavaScript 模块化编程(笔记)

    在学习和应用JavaScript模块化编程时,开发者应根据不同的运行环境选择合适的模块化规范和工具。通过模块化技术,可以提高JavaScript代码的组织性、可维护性和重用性,从而构建出更加健壮和高效的Web应用程序。

    探索webpack模块及webpack3新特性

    从这些配置和webpack提供的丰富功能可以看出,webpack不仅仅是一个简单的模块打包工具,它还是一个多功能的模块化解决方案,能够帮助开发者处理前端构建过程中的各种问题。从webpack的发展可以看出,社区对于构建...

    用于dojo学习

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,尤其在构建复杂的、企业级的富互联网应用程序(Rich Internet Applications, ...对于已有经验的开发者,它也能提供有价值的参考和进阶技巧。

    06_webpack的基础打包1

    Webpack 的核心功能包括JavaScript的打包处理(如将ES6转换为ES5,处理TypeScript)、CSS的管理和预处理器(如Less、Sass)、资源文件(如图片、字体)的加载,以及HTML资源的打包和Vue Single File Components (SFC...

    vue3+vite 组件打包

    Vue3 是 Vue.js 框架的最新版本,带来了许多性能优化和新特性,如Composition API,而 Vite 是由 Vue.js 作者尤雨溪开发的新型构建工具,以其快速的开发服务器启动和热模块替换(HMR)而受到青睐。 **Vue3 知识点:...

    Node.js-上传Webpack打包出来的assets到七牛云

    Webpack则是一个模块打包工具,它可以将JavaScript、CSS、图片等各种资源打包成一个或多个优化过的静态资源文件,便于部署和管理。在本项目中,我们将讨论如何利用Node.js编写插件,将Webpack打包出的assets上传到七...

    Seajs是什么及sea.js 由来,特点以及优势

    5. **与现有库和框架兼容**:SeaJS 可以与 jQuery 等其他 JavaScript 库无缝集成,不影响已有的开发模式。 然而,SeaJS 也存在一些不足之处: 1. **学习资源有限**:相比于其他流行的库,如 RequireJS,SeaJS 的...

    解读JavaScript依赖管理.pdf

    近年来,随着ES6模块标准的普及,以及Webpack、Rollup等工具的出现,现代JavaScript项目更倾向于使用这些工具将ES6模块转换为浏览器可理解的形式,以实现模块化的编译和打包。此外,动态导入 (`import()`) 的支持也...

    前端项目-augment.js.zip

    4. **构建脚本**:如果项目采用模块化构建,可能会有Gulpfile.js或Gruntfile.js等构建工具的配置文件,用于编译、压缩和打包源码。 5. **许可证文件**:如LICENSE,说明库的开源协议,规定了使用者的权利和责任。 ...

    videojs最新版6.2.7

    `video.es.js`则采用了ES6模块化语法,对于支持ES6的现代浏览器或是使用现代构建工具的项目更为友好。 `video.min.js`是压缩后的JavaScript文件,体积更小,加载更快。`font`文件夹包含了播放器使用的图标字体,...

    Node.js技术架构概述.pptx

    Node.js的另一个优势在于其模块化系统,这得益于npm(Node Package Manager)。npm是JavaScript开发者分享代码、解决常见问题的平台,它促进了代码的复用,让开发者可以利用庞大的社区资源。截至2019年4月,npm上已...

    iot-dc3-web build::test 打包后dist

    可能有主JS文件、模块化文件、第三方库和插件等。 根据以上信息,我们可以推测这个项目是一个基于物联网的Web应用,用户界面经过精心设计和优化,使用了现代前端开发技术,如模块化CSS和JavaScript,以及可能的前端...

    electron打包错误所需资源

    `electron-builder`是一个流行的Electron应用打包工具,它提供了自动化构建、打包和发布流程。它可以生成Windows、macOS和Linux的安装程序,并处理依赖关系、应用图标、许可证文件等资源。 在打包过程中,常见错误...

    信息管理系统的打包jar包

    同时,遵循良好的编程实践,如代码规范、注释清晰、模块化设计等,有助于项目的长期发展和团队协作。通过这个信息管理系统的课设,学生可以深入学习到Java编程、数据库管理、软件架构设计等多个IT领域的关键知识点。

    JavaScript典型应用与最佳实践

    CommonJS、AMD和ES6的import/export机制提供了模块化的解决方案。同时,了解如何使用Webpack或Rollup等打包工具将模块化代码合并成单一文件,对于优化生产环境的性能至关重要。 九、框架与库 React、Vue、Angular等...

    js常用各种组件集合

    在JavaScript世界里,源码意味着我们可以查看和理解代码的内部工作原理,这对于学习、调试和定制已有工具至关重要。通过研究源码,开发者可以学习最佳实践,提高自己的编程技巧,并有可能为开源项目贡献自己的力量。...

    前端开源库-zpack

    3. **模块化管理**:Zpack支持CommonJS、AMD、ES6模块化标准,能够有效地管理和组织项目中的各个模块,提高代码复用性和可维护性。 4. **优化与压缩**:在打包过程中,Zpack会进行代码压缩和优化,减少文件大小,...

Global site tag (gtag.js) - Google Analytics