zoukankan      html  css  js  c++  java
  • Webpack&AMD&CMD

    AMD

    补充AMD与CMD规范的来源:

    • AMD是RequireJS(国外作者)在推广过程中形成的。
    • CMD是SeaJs(国内作者:玉伯)在推广过程中形成的。

    time:2017/02/07

    学习使用require.js

    下载RequireJS中文网阮一峰——RequireJS和AMD规范

    下面的例子均以main.js为RequireJS的入口文件。

    定义匿名模块(不存在依赖)

    
    //count.js
    define(function() {
    
        //_表示私有变量,外部无法直接访问与更改。
        var _count = 0;
        function addCount(num) {
            return count += num;
        }
        
        //return后面跟的是该模块暴露在外的接口
        return {
            addCount: addCount
        }
    });
    
    //在其他js脚本中的调用方式(main.js,与count.js在同一目录下)
    require(['count'], function(count) {
        console.log(count.addCount(1)); //控制台输出1
    });
    

    (存在依赖且不在同一目录下,例如jQuery)

    //jquery在lib目录下
    //main.js
    require.config({
        //baseUrl: 'lib',    可以通过修改baseUrl属性来修改基目录。默认地址是入口文件所在的位置。
        paths: {
            'jquery': 'lib/jquery'  //不需要带.js后缀
        }
    });
    
    require(['count', 'jquery'], function(count, $) {
        var num = count.addCount();
        $('body').text(num);
    });
    

    模块暴露的接口可以是函数

    
    //test2.js
    define([
        'require', 'jquery', 'count'
    ], function(require, $) {
        'use strict';
        var count = require('./count');
        return function exec(){
            var num = count.addNum(2);
            $('body').text(num);
        }
    });
    
    //main.js
    require(['test2'], function (test2){
        test2();
    });
    

    兼容CommonJS写法

    
    //将require、exports、module作为依赖注入
    define(function(require, exports, module) {
        var a = require('a'),
            b = require('b');
            
        module.expots = {};
    });
    

    为模块定一个模块ID

    //显示指定模块名称,不推荐。
    define('module_id', [], function() {
        //code
    });
    
    //or 使用优化工具自动生成模块名,来将多个模块打成一个包。(加快浏览器的载入速度)
    

    其他注意事项:

    • 一个文件一个模块:每个Js文件应该只定义一个模块。
    • define()中的相对模块名:为了可以在define()内部使用诸如require("./relative/name")的调用以正确解析相对名称,记得将require本身作为一个依赖注入到模块中。

    r.js options

    配置目录:build

    1. appDir: app的最顶层路径;非必要属性;设置之后其他配置路径都成为该路径的相对路径。
    2. baseUrl:所有模块的相对路径。
    3. mainConfigFile:requirejs的主要的配置文件,形如:requirejs({})require.config({})
    4. path:为模块配置路径。
    5. map
    6. packages
    7. dir:保存输出文件的路径,默认名为build(文件夹),且与build file同目录。
    8. keepBuildDir
    9. shim:兼容非AMD规范的组件

    关于在gulp中使用requirejs,gulp-requirejs插件已被列入gulp的黑名单,表示和gulp不兼容。所以尝试使用amd-optimize

  • 相关阅读:
    02---Nginx
    7.如何发布vue项目到服务器
    6.vue如何上传到svn
    6.解决AXIOS的跨域问题
    4.VUEX到底是什么
    3.sublime vue 语法高亮插件安装
    2.vue 安装教程
    1.Google Chrome浏览器 控制台全解析
    6.如何使用jedis的线程池
    java如何LOG打印出日志信息
  • 原文地址:https://www.cnblogs.com/foxNike/p/6374700.html
Copyright © 2011-2022 走看看