ykpm

说明

基于webpack封装的打包工具，集成打包、调试(热更新)、代理功能，默认开启es6语法支持。

安装

npm install ykpm

初始化配置

ykpm init             # 初始化默认配置

构建

ykpm build             # 打包config中的files中的所有入口文件

ykpm [filename]        # 此filename，需在config中的files配置，只会打包lib、common及其此文件

ykpm build [filename]

调试

ykpm debug

安装loader

ykpm install [loader]

配置说明

配置文件默认寻找项目下package.json文件

代理功能中，网络地址匹配支持的通配符使用wildware-named

注意:

• 调试开启热更新（"hot": true）并且使用代理的时候，需要把本地代理域名放入浏览器不代理的地址列表中，并在hosts中将当前域名指向本地IP。 此问题是开启代理，node中捕获的url是带有域名的，非代理情况下，是不含域名的，此问题已和webpack-dev-server作者沟通过，不知后续是否能够改动(……o(╯□╰)o)。

• 项目所需babel组件,默认集成babel-preset-es2015，如需其他，可在配置添加(会覆盖默认值)。

  • 增加babel-preset、babel-plugins前缀，会在ykpm目录寻找插件，需使用ykpm install 安装。例如："presets": [ "babel-preset-es2015" ], ykpm install babel-preset-es2015
  • 省略前缀，会在当前项目目录下寻找插件，使用npm install 安装即可。例如："presets": [ "es2015" ], npm install babel-preset-es2015. (如使用es-2015-loose的话，目前必须使用无前缀配置，安装在当前项目下，主要是因为其中组件寻址逻辑问题。)

"ykpm": {
    //打包相关配置
    "build": {
        "buildPath": "./build", //打包文件输出目录
        "filesPath": "./src", //开发文件目录，决定了所有组件的根路径
        "publicPath": "/dist/src/", //线上路径引用地址，也可是http地址(一般会在图片、字体打包时加入该路径)
        "library": { //插件开发配置，key为插件变量名称，value为插件支持格式(具体可见webpack配置)
            "ykpm": "umd"
        },
        "option": {
            "cssExtract": true, //css文件抽离单独打包，默认false
            "cssAutoprefixer": true, //自动添加css3属性前缀，默认true
            "fileLimit": 10000 //文件压缩，小于10k的文件直接转换为base64位data数据，不在生成物理文件，默认false
            "jsUglify": true, //js文件压缩，默认true
            "commonExtractToLib": false //提取所有入口文件公共部分至lib基础库中，默认false
        },
        /**
         * babel 配置，默认值如下
         * 
        */
        "babel": {
            "presets": ["babel-preset-es2015"],
            "plugins": [
                ["transform-runtime", {
                    "helpers": false, 
                    "polyfill": false,
                    "regenerator": true
                }]
            ]
        },
        /**
         * 用户自定义loader
         * 可先通过ykpm install [loader] 安装相关解析器
         * key为文件后缀名，value为解析loader
         * 系统目前集成js、jsx、图片、文字、tpl相关解析，如需在此基础上增加loader，value前面加+：“less”:"+less2",否则覆盖默认设置
        */
        "loader": {
            ".less": "less-loader"
        },
        /**
         * 外部组件调用,如在html直接引用react组件，不经过打包，配置此项，内部使用：import react from 'react'
         * 参考http://webpack.github.io/docs/configuration.html#externals
        */
        "external": {
            "react": 'React'
        }, 
        //引用简化,内部可使用：import react from 'react',而不用使用完整路径：import react from './js/lib/react.min.js'
        "alias": {
            "jquery": "lib/jquery.min.js",
            "react": 'lib/react.min.js'
        },
        /**
         * 全局变量,配合alias使用，key为项目中要使用的变量，value为要使用的组件，对应alias中的key
         * 内部可直接使用 $、react变量，而无需再用导入：import $ from 'jquery'
        */
        "global": {
            "$": "jquery",
            "react": "react"
        },
        //lib文件路径名称，默认在buildpath下lib.js
        "libFileName": "js/lib.js",
        //需要单独打包出的公共基础库：1.可使用alias中简称 2.可直接使用路径(一般是模块挂载到window上的，否则会无法import到)
        "lib": [
            "jquery",
            "lib/test.min.js"
        ],
        /**
         * 要打包的主入口文件
         * 
         * 注意：适应某些特殊需要，类似g.js全局业务逻辑,需要标识“common”，入口文件涉及到g.js中重复module的，将不在重复打包
         *      不涉及g.js的，需要标识false
        */
        "files": [
            "js/live.js",

            [{"js/g.js": ["js/g/nav.js", "js/g/top.js"]}, "common"],
            ["js/g.js", "common"],
            ["js/no_g_page.js", false]
        ]
    },
	//调试代理相关配置
    "debug": {
    	"contentBase": "./static/",//静态文件目录，一般放置html
    	"host": "local.youku.com",//本地服务域名（如果使用代理功能，需把此域名配置在浏览器不代理地址列表）
    	"port": 3333,//端口（如果使用代理功能，浏览器代理端口需与此配置相同）
    	/*
    	 * 是否开启热更新(保存修改的文件时，页面会自动刷新，无需手动)，默认true
    	 * **提醒：开启热更新并且使用代理的时候，需要把本地代理域名放入浏览器不代理的地址列表中
    	*/
		"hot": true,
    	/*
    	 * 代理通配符过滤器
    	 * 默认配置查看wildware-named
    	*/
    	"proxyFilter": {
			"jscss": "(js|css)"
		},
      	/*
       	 * 代理项配置(需要开启浏览器代理，代理到本地：127.0.0.1:3333)
		 * 同域名下，文件、接口支持混写
      	*/
        "proxy": {
            /*
             * 代理文件
             * 需指明本地对应路径文件target，支持通配符匹配
             * 
             * 
             * 代理接口
             * jsonpName指明jsonp回调函数传参名称，默认jsonpcallback
             * 
             * 需指明返回数据data：
             *   1. 支持mockjs数据格式
             *   2. 支持文件路径（如例4），该路径需指向一个文件，并导出一个data属性(可使用module.Mock获取mock实例，调用Mock.Random等方法)
             * 		2.1 可直接返回ajax需要的值：exports.data = {a:1}，
             *      2.2 可为一个function：exports.data = function(req，res){return {a:1}};
             *          接收req，res两个http请求参数，return的值作为ajax的返回值
            */
            
            //例1
            "http://css.tudou.com/[all:path]/[alnum:file]_[digit:version].[jscss:extname]": {
                "target": "[path]/[file].[extname]"
            },
            
            //例2
            "http://css.tudou.com/": {
                "path": "[all:path]/[alnum:file]_[digit:version].[jscss:extname]",
                "target": "[path]/[file].[extname]"
            },
            
            //例3
            "http://css.tudou.com/v3/dist/src/": [
                {
                    "path": "[all:path]/[alnum:file]_[digit:version].[jscss:extname]",
                    "target": "[path]/[file].[extname]"
                },
                {
                    "path": "/getJsVersion.action",
                    "data": {
                        "data|1-10": [
                            {
                                "id|+1": 1
                            }
                        ]
                    }
                }
            ],
            
            //例4
            "http://portal.zb.youku.com/liveportal/getTest1.action": {
                "data": "./src/test/mock.js"
            },
            
            //例5
            "http://portal.zb.youku.com/liveportal": {
                "path": "getTest2.action",
                "data": {
                    "data|1-10": [
                        {
                            "id|+2": 2
                        }
                    ]
                }
            },
            
            //例6
            "http://portal.zb.youku.com/liveportal": [
                {
                    "jsonpName": "callback",
                    "path": "getTest3",
                    "data": {
                        "data|1-10": [
                            {
                                "id|+1": 1
                            }
                        ]
                    }
                },
                {
                    "jsonpName": "jsonpcallback",
                    "path": "getTest4",
                    "data": {
                        "data|1-10": [
                            {
                                "id|+1": 1
                            }
                        ]
                    }
                }
            ]
        }
    }
  }