By

前言

标准化输出 cmd 代码

安装插件

1
2

$ sudo npm install -g fis3-hook-cmd
$ sudo npm install -g fis3-hook-commonjs

说明 https://github.com/fex-team/fis3-hook-cmd

实例

项目准备

目录

1
2
3
4
5
6

/src/app/main.js
/src/app/webBanner.js
/src/jquery/jquery-debug.js
/static/sea.js
/index.html
/fis-conf.js

seajs下载 http://seajs.org/docs/#downloads

编写代码

/src/app/main.js

1
2
3
4
5
6

define(function(require) {
    var WebBanner = require('./webBanner.js');

    var banner = new WebBanner('#userName');
    banner.render();
});

/src/app/webBanner.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

define(function(require, exports, module) {

    var $ = require('jquery');

    function WebBanner(container){
        this.container = $(container);
        this.username = "";
    }

    module.exports = WebBanner;

    WebBanner.prototype.render = function() {
        this._init();
        this.container.html(this.username);
        console.log(this.username);
    }

    WebBanner.prototype._init = function() {
        this.username = "hans";
    }

});

/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script src="./static/sea.js"></script>

<script>
// seajs.config({
//     base: "./src/",
//     alias: {
//         "jquery": "jquery/jquery-debug.js",
//         "$": "jquery/jquery-debug.js"
//     }
// });
seajs.use("app/main");
</script>

<h1 id="userName"></h1>

编译的时候 需要把 seajs.config 注释掉，否则会影响fis编译

配置fis-conf.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 只需要编译 html 文件，以及其用到的资源。
fis.set('project.files', ['*.html', 'map.json']);

fis.match('/src/**/*.js', {
  isMod: true
});

fis.match('/static/sea.js', {
  isMod: false
});

fis.hook('cmd', {
  baseUrl: './src/',
  paths: {
    "jquery": "jquery/jquery-debug.js",
    "$": "jquery/jquery-debug.js"
  }
});

fis.match('::packager', {
    postpackager: fis.plugin('loader', {
      allInOne: {
        includeAsyncs: true,
        ignore: ['/static/sea.js']
      }
    })
  });

编译运行

1
2

$ fis3 release
$ fis3 server start

查看结果

/src/app/main.js

1
2
3
4
5
6

define('src/app/main', ['src/app/webBanner'], function(require) {
    var WebBanner = require('src/app/webBanner');

    var banner = new WebBanner('#userName');
    banner.render();
});

/src/app/webBanner.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

define('src/app/webBanner', ['src/jquery/jquery-debug'], function(require, exports, module) {

    var $ = require('src/jquery/jquery-debug');

    function WebBanner(container){
        this.container = $(container);
        this.username = "";
    }

    module.exports = WebBanner;

    WebBanner.prototype.render = function() {
        this._init();
        this.container.html(this.username);
        console.log(this.username);
    }

    WebBanner.prototype._init = function() {
        this.username = "hans";
    }

});

/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script src="./static/sea.js"></script>

<script>
seajs.config({
    base: "./",
    alias: {
        "jquery": "jquery/jquery-debug.js",
        "$": "jquery/jquery-debug.js"
    }
});
seajs.use("src/app/main");
</script>

<h1 id="userName"></h1>

这里如果正常运行需要还原配置 seajs.config

代码

https://github.com/hans007/JavaScriptCodes/tree/master/fis3/use-seajs

我的博客