工程级前端构建工具


License
MIT
Install
npm install @mochen/muse@1.0.8

Documentation

muse

工程级前端构建工具

安装

sudo npm install -g @mochen/muse

项目目录约束

.
├── README.md
├── dist
│   └── front
│       └── online
└── websrc # 前端源文件
    └── front # 工程名称
        ├── node_modules
        ├── package-lock.json
        ├── package.json
        ├── src # 工程源文件
        │   ├── common # common 不作为页面编译,存放公共文件
        │   └── about # 最终会编译为 about.html, 文件夹内部是他的文件资源
        │       ├── index.html
        │       ├── index.js
        │       └── index.less
        └── stylelint.config.js

项目结构建设完毕后。需要先执行两个命令用于初始化项目。

muse create muserc
muse create browser

参数配置

详细参数配置说明,参看.muserc.js

使用

Build

$ muse build [page]

该命令与watch命令互斥,属于两种开发构建模式。

参数

[page]参数不必须,默认为all,也即所有页面。

如果page不等于all,则使用watch模式,进程会一直监听变化,但不会刷新页面,需要手动刷新。

如果page等于all,在构建之前会清空对应的dist目录。

命令

build模式下,会生成实体文件。也就意味着,你可以将文件作为后端模板使用。所以这个模式也被用于前后端不分离的项目开发模型。

Watch

$ muse watch [page]

该命令与build命令互斥,属于两种开发构建模式。

参数

[page]参数不必须,默认为all,也即所有页面。

命令

watch模式下,默认会生成本地一个http server用于预览。不会产生实体文件。

可以通过配置文件,将其配置为sock模式。用于需要nginx的项目。可将socknginx反向代理。请求会落到webpack-dev-serversock模式需要具备一定的工程思维和必要的nginx配置能力。

Deploy

$ muse deploy [page]

参数

[page]参数不必须,默认为all,也即所有页面。

命令

deploy保留了[page]参数。但这不意味着deploy某一个页面是个正确的行为。

webpack在进行多页项目构建时,会针对整个项目做出优化。deploy某一个页面,会使得无法对整个项目进行优化。

除非你要debug某个页面,否则,不建议deploy单独的页面。

New

$ muse new [page]

参数

[page]参数必须,需指定一个页面名称。

命令

该命令可快速创建一个页面代码文件夹。如下所示。

该�目录规则可以通过.muserc.js中的pagePath修改。

about
└── static
    ├── about.html
    ├── about.js
    └── about.less

Create

$ muse create [file]

参数

[file]参数可选值 ['muse', 'eslint', 'babel', 'postcss', 'stylelint']

命令

muse内置了各种rc文件,如果需要个性化,可以自己生成rc文件到项目中,自行修改。

Lint

$ muse lint [fix]

参数

[fix] 非必须,可选值['fix']

命令

代码检测,根据.muserc.js中的配置进行js/css代码检测。增加fix参数,可自动修复一些可以被自动修复的错误。

Lint:fix

$ muse lint:fix

命令

muse lint fix的别名