前言

標準化輸出 cmd 代碼

安裝插件

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

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

實例

項目準備

目錄

/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

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

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

/src/app/webBanner.js

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

<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文件

// 只需要編譯 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']
      }
    })
  });

編譯運行

$ fis3 release
$ fis3 server start

查看結果

/src/app/main.js

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

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

<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

我的博客