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 包。