前端自动化构建工具 - FIS3 - 第七节:cmd模块化支持

前言

标准化输出 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

编译的时候 需要把 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

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

代码

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

我的博客