OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

WebPack:更优秀的模块依赖管理工具,及require.js的缺陷


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1419132458622
注意 转载须保留原文链接,译文链接,作者译者等信息。  
注* 之前的这篇文章: JavaScript代码组织结构良好的5个特点,作者以reuqire.js为举例,提出应该使用模块化的代码组织方式去管理你的JavaScript代码,并提出了一些注意事项,在此文的评论中有人指出WebPack是比require.js更为优秀的代码组织管理工具,并列举了require.js的一些缺陷。

WebPack  是一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。

它有两种模块加载模式

同步加载模式: CommonJS (Node.JS)的模式

var commonjs = require("./commonjs");

异步加载模式:即 AMD 模式,与require.js相同

define(["amd-module", "../file"], function(amdModule, file) {
    require(["big-module/big/file"], function(big) {
        var stuff = require("../my/stuff");
    });
});

注* 以下来自该文章评论:

如果你用过webpack,你就不会用require.js去组织你的代码。

webpack的优势:

- require.js的所有功能它都有
- 编绎过程更快,因为require.js会去处理不需要的文件

还有一个额外的好处就是你不需要再做一个封装的函数,require.js中你得这样:

define(['jquery'], function(jquery){})

然后你就会发现你有十级深度的依赖,这太扯了,你不得不使用下面的结构。

define(function(require, exports, module){
    var _ = require('underscore');
    var helpers = require('./helpers');
    var constants = require('../constants');
    var utils = require('../utils');

现在你需要一个很大的封装去定义每个模块,然后你需要在在require.js的配制文件中将每个模块的路径都配出来(下面是我以前用的一个配制):

require.config({
    baseUrl: '/scripts',
    paths: {
        'facebook'          : '//connect.facebook.net/en_US/all',
        // 'facebook'       : '//connect.facebook.net/en_US/sdk/debug'
        'requirejs'         : '../bower_components/requirejs/require',
        'react'             : '../bower_components/react/react-with-addons',
        'underscore'        : '../bower_components/lodash/dist/lodash',
        'futures-requirejs' : '../bower_components/futures-requirejs/future',
        'jquery'            : '../bower_components/jquery/jquery',
        // 'phaser'         : '../bower_components/phaser/build/phaser',
        'phaser.filters'    : '../bower_components/phaser/filters/',
        'phaser'            : '../thirdParty/phaser/Phaser',
        'snap'              : '../bower_components/Snap.svg/dist/snap.svg',
        'proton'            : '../thirdParty/Proton',
        'copyProperties'    : '../thirdParty/copyProperties',
        'flux'              : '../bower_components/flux/dist/Flux',
        'eventEmitter'      : '../bower_components/eventEmitter/EventEmitter',
        'pixi'              : '../bower_components/pixi/bin/pixi',
        'crossroads'        : '../bower_components/crossroads/dist/crossroads',
        'signals'           : '../bower_components/js-signals/dist/signals',
        'hasher'            : '../bower_components/hasher/dist/js/hasher',
        'async'             : '../bower_components/async/lib/async',
        'socket.io-client'  : '../bower_components/socket.io-client/dist/socket.io',
        'html2canvas'       : '../bower_components/html2canvas/build/html2canvas.min',
        'hammer'            : '../bower_components/hammerjs/hammer',
        'touch-emulator'    : '../bower_components/hammer-touchemulator/touch-emulator',
        'moment'            : '../bower_components/moment/moment',
        // 'famous'         : '../bower_components/famous',
        'tinygradient'      : '../bower_components/tinygradient/tinygradient',
        'page'              : '../bower_components/page/index',
        // 'faker'          : '../bower_components/faker/dist/faker',
        'faker'             : '../thirdParty/Faker',
        'perlin'            : '../thirdParty/Perlin',
        'tinycolor'         : '../vendors/tinycolor',
        // 'flux'           : '../../node_modules/flux/index',
        'client'            : './',
        'errors'            : './errors',
        'server'            : '../../server',
    },
    packages: [{
        name     : 'API2',
        location : '../bower_components/api2/src/',
        main     : 'API'
    }],
    shim: {
        'phaser.filters/Fire': {
            deps: ['phaser'],
        },
        'page': {
            exports: 'page'
        },
        'snap' : {
            exports: 'Snap'
        },
        'html2canvas' : {
            exports: 'html2canvas'
        },
        'facebook' : {
            exports: 'FB'
        },
        // 'underscore': {
        //     deps: [],
        //     exports: '_'
        // },
        'phaser': {
            exports: 'Phaser'
        },
        'pixi': {
            exports: 'PIXI'
        },
        'hammer': {
            exports: 'Hammer'
        },
        'touch-emulator': {
            exports: 'TouchEmulator'
        },
        'proton': {
            exports: 'Proton'
        },
        'moment': {
            exports: 'moment'
        }
    }
});

但是你用webpack你不需要做上面这些东西,你只需要:

var react = require('react');

真的,不需要任何模块的定义。

当然,如果你需要一些特别的别名,你需要写多一点,这是一个webpack.config的例子:

alias: {
    // Build
    //  - Webpack config;
    webpackConfig : absPath('webpack.config.js'),
    // Structure
    //  - Aliases to the big building blocks of the app;
    server        : absPath('/src/server/'),
    assets        : absPath('/src/assets/'),
    app           : absPath('/src/app/'),
    client        : absPath('/src/client/'),
    // Components
    //  - Aliases to npm, bower and other modules;
    bowerComponents : absPath('bower_components'),
    otherModules    : absPath('other_modules'),
    nodeModules     : absPath('node_modules'),
    // Application
    //  - Aliases for the most used files in the app;
    errors          : 'client/errors',
    constants       : 'client/constants',
    utils           : 'client/utils',
    RCSSW           : 'client/utils/RCSSW',
    'react-tooltip' : 'otherModules/react-tooltip/src/index.js',
    // Custom libs
    //  - Rename some libs;
    //  - Non npm libs;
    API2           : 'bowerComponents/api2/src/API',
    copyProperties : 'otherModules/copyProperties',
    eventEmitter   : 'wolfy87-eventemitter',
    hammer         : 'hammerjs',
    underscore     : 'lodash',
    // We use the exact same PIXI that Phaser uses.
    PIXI          : "otherModules/phaser/PIXIWrapper.js",
    pixi          : "otherModules/phaser/PIXIWrapper.js",
    // phaser     : "nodeModules/phaser/dist/phaser-arcade-physics.js",
    phaserUnFixed : "nodeModules/phaser/build/custom/phaser-no-physics.js",
    phaser        : "otherModules/phaser/phaser-wrapper.js",
    tinycolor     : 'tinycolor2', // Yes, is 2, is right!
    // As said here http://facebook.github.io/react/docs/addons.html
    react     : 'react/addons',
}

注意到区别了吗?非常明显。

你在浏览器定义的层次需要在package.json文件中配置。


注* 与异步加载相比(AMD),同步加载的写法要简单得多,不必处理诸多回调。但在前端采用此方案的性能会非常非常差,无法投入生产环境,所以各种模块加载工具都会自带一些build工具,按照代码内定义的模块依赖关系,将所需模块按依赖次序压缩合并,打包成一两个静态文件,

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 2015年的JavaScript:Angular之类的框架将被库取代
  2. NodeJS就是癌症[2011]
  3. 提高NodeJS网站的安全性:Web服务器防黑客攻击技巧
  4. 什么是IndexedDB:Web离线数据库入门简介及基础教程
  5. HTML5的TCP和UDP Web Socket API草案定稿
  6. 为什么io.js要从Node.js中分裂出来?
  7. 避免Node.js中的命令行注入安全漏洞
  8. JavaScript代码组织结构良好的5个特点[reuqire.js]
  9. 在JavaScript的Array数组中调用一组Function方法
  10. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 在JavaScript的Array数组中调用一组Function方法
  2. 2015年的JavaScript:Angular之类的框架将被库取代
  3. 什么是IndexedDB:Web离线数据库入门简介及基础教程
  4. Node.JS编码规范指南教程:教你优雅地写JavaScript代码
  5. JavaScript的设计缺陷?浮点运算:0.1 + 0.2 != 0.3
  6. Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的
  7. 理解JavaScript中的事件路由冒泡过程及委托代理机制
  8. 用JavaScript制作HTML5动画基础
  9. Node.js 包教不包会
  10. 使用Javascript开发OS X应用程序

 关键字 - JavaScript
  1. JavaScript中NaN的秘密
  2. JavaScript也有getter/setter方法:ES5 Object对象的5个不为人知的特性
  3. JavaScript中splice与slice的区别、数组的复制以及在指定位置添加删除元素
  4. JavaScrip字符串模板表达式中的反引号怎么打?
  5. Node.JS更改Windows注册表regedit的几种方法
  6. AngularJS在大型单页面应用中的性能优化(二)
  7. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  8. Debian下设置Linux Shell脚本开机自动启动Node.JS进程
  9. Node.JS通过原型和类继承EventEmitter,实现收发事件的几种方法
  10. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号