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


Keywords
ts, typescript, bundle, vue, react, webpack, marax, marauder
License
MIT
Install
npm install @mara/x@2.9.1

Documentation

Marauder

npm

挖掘机技术哪家强

Marauder 下一代工程化体系。

Quick Overview

npx @mara/create my-app
cd my-app
yarn dev

安装

依赖 node 10+, TypeScript 2.7+

推荐使用 @mara/create 一键生成项目:

npx

npx @mara/create my-app

npm

npm init @mara my-app

yarn

yarn create @mara my-app

Marauder CLI

npm i @mara/cli -g

mara create my-app

项目预设模板

Marauder 预设以下模板,可通过 --preset | -p 参数指定。

  • vue Vue 项目模板(js/ts)
  • react React 项目模板(js/ts)

Vue 模板

未指定预设时,默认创建 Vue x Typescript 项目:

npx @mara/create my-app

通过 -p 指定 vue 预设

npx @mara/create my-app -p vue

React 模板

指定 react 预设,创建 React x Typescript 项目:

npx @mara/create my-app -p react

空白模板

--preset 参数指定其他非预设值时,将应用空白模板

使用 zepto:

npx @mara/create my-app --preset zepto --no-ts

不使用任何类库:

npx @mara/create my-app --preset --no-ts

完整的命令行参数有:

  • --use-npm 使用 npm 安装依赖,默认 yarn
  • --use-pnp 使用 yarn pnp 模式
  • --no-ts 不使用 typescript
  • --preset | -p 指定预设模板,vue | react | other lib
  • --force | -f 强制在指定目录生成项目

手动安装

my-app 为例

my-app/
├── README.md
└── package.json

安装依赖:

yarn add @mara/x -D

创建项目结构:

mkdir -p src/views/index
cd src/views/index
touch index.js index.html

完整结构:

my-app/
├── README.md
├── package.json
├── node_modules
└── src
    └── views
        └── index
            ├── index.js
            └── index.html

添加 npm scripts

{
  "scripts": {
    "dev": "marax dev",
    "build": "marax build"
  }
}

控制台执行 yarn build 命令,正确构建即为安装成功。

项目结构

Marauder 项目具有以下结构:

my-app
├── README.md
├── node_modules
├── package.json
├── marauder.config.js
├── .gitignore
└── src
    └── views  # 视图目录
        ├── home  # 页面
        │   ├── index.js
        │   └── index.html
        └── profile  # 页面
            ├── index.js
            └── index.html

视图目录

marauder 为多页打包工具,我们约定 src/views视图目录,视图目录用于存放页面

页面

我们把视图目录下,含有入口脚本入口文档文件的目录称为页面。 我们约定入口脚本与入口文档以 index 命名。

可识别为入口脚本的文件有:

  • index.js
  • index.ts
  • index.jsx
  • index.tsx

当同时存在多个入口脚本时,遵循以下加载顺序:

ts > tsx > js > jsx

入口文档:index.html

页面示例:

views
├── home  # home 页面
│   ├── index.js
│   └── index.html
└── profile  # profile 页面
│   ├── index.ts
│   └── index.html
└── other  # 非页面,缺少入口脚本
    ├── foo.js
    └── index.html

上述示例中 homeprofile 目录含有入口脚本与入口文档,因此被识别为页面other 目录仅含有入口文档,缺少入口脚本,因此不是页面。

命令

开发

yarn dev

运行开发模式,在本地 3022 端口(默认)启动开发服务器。

构建

yarn build

运行生产模式打包资源,在 dist 目录下输出项目构建结果。