挖掘机技术哪家强
Marauder 下一代工程化体系。
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
x Typescript
项目:
npx @mara/create my-app
通过 -p
指定 vue
预设
npx @mara/create my-app -p vue
指定 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
上述示例中 home
和 profile
目录含有入口脚本与入口文档,因此被识别为页面。
other
目录仅含有入口文档,缺少入口脚本,因此不是页面。
yarn dev
运行开发模式,在本地 3022
端口(默认)启动开发服务器。
yarn build
运行生产模式打包资源,在 dist
目录下输出项目构建结果。