Nothing Precedes Matter

    mmstate

    1.0.2 • Public • Published

    mmState CLI && demo list

    CLI

        npm install mmstate #安装
    
        mmstate new projectName #创建一个默认使用avalon 1.7的mmState项目
    
        mmstate new -h
            -v, --avalonVersion [avalonVersion]  avalon的版本
            -l, --loader [loader]                打包方式,requirejs or webpack,avalon 2只能用webpack打包
    
        cd projectName 
    
        mmstate serve #启动服务器
    
        mmstate update #更新模板库,linux上可能需要 suo
    
        mmstate build #编译
    

    例子

    ** 需要服务器环境才能跑起来【commonjs need fekit】

    1,打开页面看效果

    2,对着文档看例子代码 & http://ued.qunar.com/oniui/mmRouter/avalon.mmRouter.doc.html#!/

    3,动手,做任何修改使之适合你的业务

    4,常见问题,请看 & https://github.com/RubyLouvre/mmRouter/issues/71

    5,打包

    requirejs和webpack版本都支持打包以及按需加载

    requirejs打包:gulpfile.js

    build task配置

    gulp.task('build', function() {
        var requirejs = require('requirejs');
    
        var config = {
            appDir: "www",
            baseUrl: "script/",
            dir: "build",
            map: {
                "*": {
                    "css": "require-css/css",
                    "text": "lib/text",
                    "avalon": "empty:" // 不打包avalon
                }
            },
            skipDirOptimize: true, // 只处理modules的配置
            optimizeCss: "none",
            //separateCSS: true,
            //buildCSS: false,
            modules: [
                {
                    name: "common"
                },
                {
                    name: "pages/stateBlog",
                    exclude: ["text"]
                },
                {
                    name: "pages/stateDetail",
                    exclude: ["text"]
                },
                {
                    name: "pages/stateList",
                    exclude: ["text"]
                }
            ]
        };
    
        requirejs.optimize(config, function (buildResponse) {
            var contents = fs.readFileSync(config.out, 'utf8');
        }, function(err) {
        });
    });
    

    webpack打包:StateUrlCompilationPlugin[在本项目的webpack目录下获取]

    重写avalon.controller.loader

        avalon.controller.loader = function (url, callback) {
            if (url.join) {
                __webpack_require__.e(url[1], function (r) {
                    callback(r(url[0]))
                })
            } else {
                var msg = url + '没有打包进来'
                window.console && console.log(msg)
                throw Error(msg)
            }
        }
    

    webpack.config配置

    'use strict';
    
    var path = require('path');
    var fs = require('fs');
    
    var webpack = require('webpack');
    
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var StateUrlCompilationPlugin = require('./StateUrlCompilationPlugin')
    
    var excludeFromStats = [
        /node_modules[\\\/]/,
        /\.html/
    ];
    
    var srcDir = path.resolve(process.cwd(), 'www');
    
    var alias = {
        avalon     : 'script/avalon.new',
        '../avalon': 'script/avalon.new',
        mmRequest  : 'script/mmRequest/mmRequest',
        mmPromise  : 'script/mmPromise/mmPromise',
        mmRouter   : 'script/mmRouter/mmRouter',
        mmHistory  : 'script/mmRouter/mmHistory',
        mmState    : 'script/mmRouter/mmState',
        route      : 'script/route',
        Animation  : 'script/animation/avalon.animation'
    }
    
    function makeConf(options){
        options = options || {};
    
        var config = {
            entry: {
                "detail": ["script/detail"],
                "list"  : ["script/list"],
                "route" : ["route", "script/blog"],
                "lib"   : ['avalon', 'mmPromise', 'script/avalon.getModel.js', 'mmRequest', 'mmState', 'Animation']
            },
            output: {
                path: path.resolve('./'),
                filename: 'build/script/[name].js',
                chunkFilename: 'build/script/[name].js',
                publicPath: '/'
            },
    
            resolve: {
                root: [path.resolve(srcDir, 'build'), srcDir],
                alias: alias,
                extensions: ['', '.js', '.css', '.scss', '.png', '.jpg', '.jpeg']
            },
    
            module: {
                noParse: ['avalon', 'script/avalon.new', 'node_modules'],
                loaders: [
                    {test: /\.css$/, loader: 'style-loader!css-loader'},
                    {test: /\.html$/, loader: 'html', exclude: [/.(ex|doc)[0-9]*\.html/]}
                ],
                // preLoaders: [
                //     {test: /\.js$/, loader: "amdcss-loader"}
                // ]
            },
            plugins: [
                new ExtractTextPlugin('build/css/[name].css',{
                    allChunks: true
                }),
                new webpack.ProvidePlugin({
                    avalon: "avalon"
                }),
                new webpack.optimize.CommonsChunkPlugin({
                    name: "lib", 
                    minChunks: Infinity,
                    filename: "build/script/lib.js"
                }),
                new StateUrlCompilationPlugin({})
            ],
            devServer: {
                stats: {
                    cached: false,
                    exclude: excludeFromStats,
                    colors: true
                }
            }
        };
    
        return config;
    }
    
    module.exports = makeConf({});
    
    

    Install

    npm i mmstate

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    ISC

    Last publish

    Collaborators

    • yangqianjun