@mixup/x
支持 React / Vue + Ts 的多页应用打包工具
Last updated 5 months ago by ittiamc .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @mixup/x 
SYNC missed versions from official npm registry.

MIX

支持 React / Vue + Ts 的多页应用打包工具。

安装

依赖 Node.js 8.10.0+

npx @mixup/create my-app

手动安装

也可以在现有项目中手动安装 @mixup/x

yarn add @mixup/x -D

配置 npm script

package.json 中配置 npm-script

"scripts": {
  "dev": "mix dev",
  "build": "mix build"
 },
 ...

命令

MIX 提供开箱即用的多页应用打包服务,在 mix 中页面又称为视图(view),存放于 src/views 目录下。

我们约定,一个典型的页面应至少包含一个 index.html 文件和一个 index.js 文件。

一个项目应至少含有一个页面。

启动开发环境

运行开发命令在本地启动一个开发服务器,默认端口号 3022

npm run dev

打包项目

打包页面,将在 dist/<view_name> 目录下输出构建结果

npm run build

FTP 上传

在 build 模式下可配置使用 ftp 上传功能,需在项目根目录创建 mix.config.js 文件,并注册 ftp 账号信息。

通过 --ftp 参数指定将打包结果上传 ftp。为方便多分支测试,当传递 branch_name 值时,将创建 branch 文件夹作路径隔离。

npm run build --ftp [branch_name]

打包 dll 文件

mix.config.js 中配置 vendor 信息

vendor: ['react', 'react-router']

运行 dll 命令生成公共资源包,执行结果将会输出到 dist/vendor 文件夹下

npm run dll

# 打包 dll 文件,并上传至文件服务器
npm run dll --ftp

打包组件

mix 除了支持项目打包外,也可作为组件打包工具。

在工程 src 文件夹中创建 index.js 文件作为组件入口

npm-script 中配置

"build": "mix lib"

打包

npm run build

打包后文件将在 lib 目录中输出构建结果

此外还可指定 --all 参数来打包 demo

npm run build -- --all

教程

代码分割

动态代码分割

使用动态 import 方法生成动态 chunk 包

import('./my-module.js').then(module => {
  // Do something with the module.
})

这种使用方式也支持 await 关键字。

let module = await import('/modules/my-module.js')

静态代码分割

此功能可零配置启用,凡是在 views/<view_name>/ 下符合命名约定 index.<chunk_name>.js 的文件均会被视为 chunk 包拆分,拆分后的 bundle 文件以 <chunk_name>.servant.js 命名,这里称之为 servant 包。

其中 chunk_name 为拆分入口的名称,例如 index.foo.js 构建后将生成 foo.servant.js

<chunk_name>.servant.js 文件将只会在生产环境(build)生成,在开发环境(dev)中,所有的 servant 将合并到 entry 中引入。对于使用者来说一切都是无感知的。

打包 vendor

默认的,mix 会自动拆分 vendor 包。

Current Tags

  • 1.0.5-alpha.0                                ...           latest (5 months ago)

4 Versions

  • 1.0.5-alpha.0                                ...           5 months ago
  • 1.0.4-alpha.0                                ...           5 months ago
  • 1.0.3-alpha.0                                ...           5 months ago
  • 1.0.2-alpha.0                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 4
This Month 8
Last Day 0
Last Week 4
Last Month 8
Dependencies (78)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |