Seajs的配置

时间  2019-11-16
标签 seajs 配置 繁體版
原文   原文链接

下载

在cmd命令窗口经过npm install saejs下载
seajs的 npm下载指令查找方法以下

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

下载完成后，生成一个 node_modules目录， seajs核心文件放在 node_modules\seajs\dist下，以下图所示

clipboard.png

引入seajs

新建 index.html文件，将 sea.js和 index.html放在同一级目录

clipboard.png

在 index.html中经过 script标签引入 sea.js 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./sea.js"></script>
    <script type="text/javascript">
        console.log(seajs)
    </script>
</body>
</html>
seajs向外暴露了一个变量 seajs,在上面代码中输出 seajs

clipboard.png

从控制台的输出能够看到，seajs是一个对象，有不少 属性和 方法,咱们对其的配置，就是调用了里面的 config()方法
config方法的源码 
seajs.config = function(configData) {

  for (var key in configData) {
    var curr = configData[key]
    var prev = data[key]

    // Merge object config such as alias, vars
    if (prev && isObject(prev)) {
      for (var k in curr) {
        prev[k] = curr[k]
      }
    }
    else {
      // Concat array config such as map
      if (isArray(prev)) {
        curr = prev.concat(curr)
      }
      // Make sure that `data.base` is an absolute path
      else if (key === "base") {
        // Make sure end with "/"
        if (curr.slice(-1) !== "/") {
          curr += "/"
        }
        curr = addBase(curr)
      }

      // Set config
      data[key] = curr
    }
  }

  emit("config", configData)
  return seajs
}
从 config方法的源码 for (var key in configData)可知， config()方法的参数应该是一个对象，每一种配置项是一个属性（key:value,key是配置名称，value是配置结果），遍历 config()方法的参数，并将每种配置的名称和结果放在 seajs.data(也是一个对象)里面

标识符

seajs模块标识分为3种：相对标识、顶级标识和普通标识。
相对路径，以. 或 ..开头
顶级路径，不以.或 ..及斜线（/）开头
普通路径，除相对和顶级路径外的，好比/（根路径）开头的，"http://"、"https://"、"file:///" 等协议标识开头的
模块命名空间是seajs所在文件的根路径即所谓的base路径，去除了seajs/x.y.z 字串，也能够指定seajs.config({base:});

base配置

base配置项在不设置时，表示的是 sea.js文件位置，由于 seajs的配置结果存放在 seajs.data中，在控制台输出 seajs.data

clipboard.png

本地电脑上 sea.js文件位置

clipboard.png

证实 base就是 sea.js文件所在的路径
在 main.js中定义一个模块，并向外暴露 
//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
    // 向外暴露
    module.exports.name = '张三'

})
在 index.html文件中使用 seajs.use()方法引入入口模块文件 main.js 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./sea.js"></script>
    <script type="text/javascript">
        
        //引入入口模块
        seajs.use('main',function(a){
            console.log(a)  //a为引入的入口文件内的模块向外暴露的对象
            console.log('入口模块引入完毕')
        })
    </script>
</body>
</html>

clipboard.png

注意看 seajs.use()方法里面的第一个参数， "main"乍一看好像没问题， mian.js不就是和 index.html在同一级目录吗，其实否则，这是 顶级路径(不以 .、 ..、 /开头，直接以 文件名或者 文件夹名开头),是相对于 sea.js的路径而言的，只是恰好这里 sea.js和 index.html在同一级目录，因此看起来像是相对于 index.html,若是写成 ./main才是相对于 index.html的路径而言
那咱们尝试更改一下 sea.js的位置，将 sea.js放在和 index.html同级目录的 module文件夹下( E:\SeajsTest\module\),将 main.js放在和 index.html同级目录的 module文件夹下的 main文件夹中

clipboard.png

由于 sea.js和 main.js的位置变了,此时 sea.js的路径是 E:\SeajsTest\module\seajs,引入 sea.js后在控制台输出 seajs.data验证

clipboard.png

此时引入 main.js时，若是使用 顶级路径应该是 main/main，或者写 相对路径---- ./module/main/main,表示相对于 index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./module/sea.js"></script>
    <script type="text/javascript">
        //引入入口模块

        // 一、使用顶级标识符
        seajs.use('main/main',function(a){
        // 二、使用相对标识符
        // seajs.use('./module/main/main',function(a){
            console.log(a)
            console.log('入口模块引入完毕')
        })
    </script>
</body>
</html>
控制台输出

clipboard.png

修改默认 base 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./module/sea.js"></script>
    <script type="text/javascript">
        // 修改base
        seajs.config({
            base:'main/'  //base:"./main"写法是错误，由于也遵循seajs标识符的规则，./main/表示和index.html同级的main目录下
        })
        //引入入口模块
        // 一、使用顶级标识符
        seajs.use('main',function(a){
            // 二、使用相对标识符
            // seajs.use('./module/main/main',function(a){
                console.log(a)
                console.log('入口模块引入完毕')
            })
    </script>
</body>
</html>
如上所示，我将 base修改成 main/表示和 sea.js同级的 main目录下，即 E:\SeajsTest\module\main,此处不能使用 base:./main/，由于加上 ./就表示相对于 index.html了，从下图中控制台输出的路径就能够看出来

clipboard.png

clipboard.png

alias（别名）配置

当 模块标识很长，写起来不方便、容易出错的时候，可使用alias来简化模块标识；还有一种状况当，咱们引入一些基础库时，常常会涉及到版本升级（版本号发生改变），此时在每一个模块中修改版本号比较麻烦，若是使用 alias定义这个模块，只需在 seajs的 alias中修改一次便可。在seajs.config中进行 一次配置以后， 全部js模块均可以用require("jquery")这种简单的方式来加载对应的模块了。使用alias，能够 让文件的真实路径与模块调用标识分开，有利于统一维

文件目录以下javascript

│  index.html
│  main.js
│  sea.js
└─ module
    ├─Jquery
    │      Jquery1.12.4.js
我在 index.html中引入入口文件 mian.js,而后在 main.js中引入 Jquery1.12.4.js 
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./sea.js"></script>
    <script type="text/javascript">
        //引入入口文件
        seajs.use('main',function(a){
            console.log(a);
            console.log('入口文件加载完毕')
        })
    </script>
</body>
</html>
//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
    //在入口模块中引入其余模块
    var jq = require('module/Jquery/Jquery1.12.4')
    // 向外暴露
    module.exports.name = '张三';
    module.exports.JQ = jq;

})
上面的写法是咱们没有配置 alias时的写法，我如今以为这个 Jquery1.12.4.js的 标识符太长，写起来太麻烦，此时就能够设置别名，注意这里的别名是 针对某个文件（模块）的 标识符，因此 alias的值要 带上路径(不是只给文件名设置别名)并且精确到文件,一样的，别名的设置也遵循 seajs标识符规则 
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./sea.js"></script>
    <script type="text/javascript">
        // 配置seajs
        seajs.config({
            alias:{
                //顶级标识符写法
                'JQ':"module/Jquery/Jquery1.12.4",
                // 相对标识符写法
                // 'JQ':"./module/Jquery/Jquery1.12.4"
            }    
        })
        //引入入口文件
        seajs.use('main',function(a){
            console.log(a);
            console.log('入口文件加载完毕')
        })
    </script>
</body>
</html>
//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
    //在入口模块中引入其余模块
    // 未配置alias时引入
    // var jq = require('module/Jquery/Jquery1.12.4')
    //配置alias后引入
    var jq = require('JQ')
    //上面的`JQ`是顶级标识符，等于base的值加上别名JQ表明的模块路径
    // 向外暴露
    module.exports.name = '张三';
    module.exports.JQ = jq;

})
这样一设置，写起来就简单多了，并且一次设置，因此地方均可以用

paths(路径)配置

当 目录层次比较深，或者是 跨目录调用模块的时候，能够用 path简化模块标识的书写, path与 alias不一样的是， path针对的是某个文件夹。paths 配置能够结合 alias 配置一块儿使用，让模块引用很是方便。

文件目录以下html

│  index.html
│  main.js
│  sea.js
│  
└─module
    └─one
        └─two
            └─three
                    A.js
                    B.js
仍是老规矩， index.html中引入入口模文件块 main.js,而后在 main.js中在引入 A.js和 B.js, index.html内容还和上面同样，下面是 main.js的代码 
//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
    //在入口模块中引入其余模块
    var moduleA = require('module/one/two/three/A.js')
    var moduleB = require('module/one/two/three/B.js')
    module.exports.person = moduleA;
    module.exports.studemt = moduleB;
})
能够看到 A.js和 B.js文件位置相对于 sea.js和 index.html很深，因此在 main.js中引入时路径很长，当要引入 three文件夹下更多模块文件时，写起来很麻烦，这个是时候 paths就派上用场了，其实跟 alias有点像，能够看作是给某个 文件夹设置了别名 
// 定义一个没有ID的模块
define(function(require,exports,module){
    //在入口模块中引入其余模块
    // 一、不配置paths时的写法
    // var moduleA = require('module/one/two/three/A.js')
    // var moduleB = require('module/one/two/three/B.js')
    //二、配置paths后的写法
    var moduleA = require('three/A.js');
    var moduleB = require('three/B.js');
    module.exports.person = moduleA;
    module.exports.studemt = moduleB;
})
要是须要引入的模块在同一文件夹下，并且藏得又深名字还长，那么就使用 alias和 paths配合使用，给文件设置 alias(别名)，给文件夹设置 paths(路径)

vars(变量)配置

目录以下 
│  index.html
│  main.js
│  sea.js
│  
└─module
    └─language
            en.js
            zh-cn.js
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 引入seajs -->
    <script src="./sea.js"></script>
    <!-- 引入入口模块文件 -->
    <script>
        // 配置seajs
        seajs.config({
            vars:{
                cn:"zh-cn"
            }
        })
        // 使用seajs.use()方法引入入口模块
        seajs.use('main',function(a){
            console.log('入口模块加载完毕')
            // 输出入口模块向外暴露的对象
            console.log(a);
        })
    </script>
</body>
</html>
//main.js
// 定义入口模块
define(function(require,exports,module){
    // 引入其余模块
    // 未配置vars时的写法
    // var language = require('module/language/zh-cn')
    // 配置vars后的写法
    var language = require('module/language/{cn}')
    module.exports.language = language;

})
vars是一个对象，对象内有 kv键值对， k是一个变量，用于代替 v,在引入模块文件时，可使用 {}包裹 k的形式来代替 v,形如 {K}，有点像插值语法，官网说是动态加载，看了不少文章都是引用官网的例子，哎，我也不知道什么场景下使用，我感受和 alias真的同样

map(映射) 配置

map用于对模块路径进行映射修改，可用于路径转换，在线调试等

文件目录以下java

index.html
│  main.js
│  sea.js
│  
└─module
        debug.js
        runtime.js
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 引入seajs -->
    <script src="./sea.js"></script>
    <script>
        // 配置seajs
        seajs.config({
            map:[
                ['runtime.js','debug.js']
            ]
        })
        // 引入入口模块
        seajs.use('main',function(a){
            console.log('入口模块加载完毕')
            console.log(a)
        })
    </script>
</body>
</html>
// 定义入口模块
define(function(require,exports,module){
    // 引入其余模块
    var M = require('module/runtime')
    module.exports.state = M;

})
上面的例子模拟了相似测试时的场景，将模块路径进行了转换

参考文章01
参考文章02
参考文章03
参考文章04
参考文章05node

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程