node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

apack-server

apack-server

安装

全局安装 apack-server

$ tnpm install -g apack-server

使用

在项目根目录执行

$ apack-server

需要注意的是,需要在 package.json 中配置 react/antd 项目的入口 entry(如果没有配置的话),配置方式和 webpack 一致。

你还可以使用以下参数获取更多功能:

参数

  • -p,--port 指定端口,默认为 8000
  • --public 静态文件目录,可以为数组,逗号隔开。默认为当前项目根目录
  • --mock 开启 Mock 功能并指定目录,默认为 "./mock"
  • --remote 联调数据远程服务器路径,默认为空,不请求联调数据
  • --jsonp 开启 jsonp 功能,并可选设置回调名称,默认为 "callback"
  • --url-limit 指定 url-loader 能够处理的文件大小,默认为 '300k'
  • --disable-cache 禁用 apack 打包时的缓存
  • -r,--refresh-cache 刷新缓存,删除并重新建立缓存,在遇到问题时可尝试使用该参数
  • --entry 指定只对某些 entry 进行构建
  • --babel-include 指定 apack 构建时的 babel-include,默认为 null,代表忽略该参数;多个用逗号隔开
  • --babel-exclude 指定 apack 构建时的 babel-exclude,默认为 node_modules,null 代表忽略该参数;多个用逗号隔开
  • --live-reload 构建完成后,自动刷新重载浏览器页面。
  • --browser-history 启用对 browser-history 的支持。

其它

使用外部库

在 package。json 中配置 externals 项,该配置和 webpack 以及其它打包软件的 externals 项配置方式一致。

配置 babel-include 和 babel-exclude

默认情况下,会对除 node_modules 目录打头之外的文件进行 babel 编译。如果要改变这一默认行为,可以搭配使用 babel-includebabel-exclude 参数进行配置。比如,如果某个项目需要使用 babel 编译 ./src 目录以及 ./node_modules/some_component 目录下的的源码,可以使用以下方式:

$ apack-server --babel-include ./src,./node_modules/some_component --babel-exclude null

需要注意的是,该例子中的 some_component 模块以源码方式发布,是应该避免的。最佳实践应该是,所有发布的模块(下载后放在 node_modules 目录的模块),都应该发布已经编译好的最终代码。

关于 url-loader

对于图片文件,当其文件大小小于设定的 url-limit 时,会被转成 base64 编码。默认 url-limit 是 300k。超过 300k 的文件,请使用 cdn。

关于 browser-history

React Router 使用 browserHistory 模式时,所有请求都会被转到 index.html 上。从而实现 不依赖 url hash 的路由。开启 --browser-history 情况下,当 apack-server 同时满足下列所有条件时, 就会把请求转到 index.html 上:

  • GET 请求
  • X-Requested-With 头的值不为 XMLHttpRequest
  • 访问路径不是根路径 /
  • 访问路径不满足正则表达式 /\.\w^/