saso-log v2.0.2
saso
一个零配置、渐进式的 web 打包工具,既能让你更加无痛的维护旧的 web 应用,也能让你更快开发现代化的 web 应用。
为什么使用 saso
当前的 web 开发人员几乎离不开 webpack,每次新项目的搭建都花费了大量的时间去配置 webpack 和配置相应的lint、test等环境,这些周边工作本应是一键完成的。
同时我们回忆一下,我们昨天维护的老旧的 web 应用,是否想要搭建环境花费了你太多时间呢?
以上的这些问题 saso 都可以一键帮你解决。
saso 的理念
saso 推崇入口文件为 .html 文件,这样更加符合早期的学习理念,也就是说最早你是怎样写 web 应用的,使用 saso 你就可以返回 .html 文件链接 .css 和 .js 文件的时代。
在你的项目中,你不需要配置和安装 webpack 、 stylus 、 babel 等任何配置项,假设你的项目只有.html文件,你只要运行一下 saso 就可以帮你快速打包
└───index.html
└───index.css
└───main.js快速开始
npm i saso -g切换到你的项目中
saso build --watch内置的 command
saso build
编译打包项目。
这个命令有以下 options :
-w --watch : 开启 watch 模式
-d --dev --development : 使用 development 模式
-p --prod --production : 使用 production 模式
--debug : debug 模式,会辅助输出部分内容
-a --analyzer : 使用 webpack-bundle-analyzer 分析 bundle
--config <configFile> : 通过命令行指定 saso 的配置文件
--entry <entryFile> : 通过命令行指定打包的入口文件
--port <port> : 通过命令行指定端口,指定了 port 时,则必定开启监听模式
--no-clear : saso 默认会清除上一次的编译信息以保持命令行的干净,使用这个参数则不会清除
saso dev
开启 webpack dev server 方便本地开发。
这个命令有以下 options :
-d --dev --development : 使用 development 模式
-p --prod --production : 使用 production 模式
--debug : debug 模式,会辅助输出部分内容
-a --analyzer : 使用 webpack-bundle-analyzer 分析 bundle
--config <configFile> : 通过命令行指定 saso 的配置文件
--entry <entryFile> : 通过命令行指定打包的入口文件
--port <port> : 通过命令行指定端口,指定了 port 时,则必定开启监听模式
--no-clear : saso 默认会清除上一次的编译信息以保持命令行的干净,使用这个参数则不会清除
saso init
初始化一个项目,如:
saso init template-path my-projectsaso 支持支持使用 npm 包作为项目的模版,也支持使用 git 地址:
saso init saso-template-typescript my-projectsaso 官方提供了部分项目模版: 参见:https://www.npmjs.com/search?q=saso-template
编写 saso 配置文件
saso 的配置文件和其他开源工具一样,支持在 package.json 中的属性定义,也支持 rc 文件、.json 、.yaml、.yml、.js文件,如可以在项目的文件夹中使用名为 saso.config.js 文件配置 saso
module.exports = {
watch: true,
port: 9000
}saso 的配置项
- analyzer
Type: Boolean Object
webpack-bundle-analyzer 的配置 options,默认不开启 webpack-bundle-analyzer 这个插件,当这个配置有值的时候,则开启。
- authorInfo
Type: Boolean Object
author-webpack-plugin 的配置options,如果为 Boolean 值 true 则从最近的 package.json 中获取作者信息,如果为 Boolean 值 false 则不使用 author-webpack-plugin 插件。
- babel
Type: Object
目前只有以下选项,用来在 production 模式下禁用 babel-plugin-no-debugging 插件
babel: {
pluginProd: {
'no-debugging': false
}
}- cliPlugins
Type: Array
- entry
Type: String
项目的入口文件,可以是 .js 、.html 文件,当入口是 .html 文件的时候,saso 会解析这个 .html 文件依赖的文件,因此推荐使用这种方式,这也更加符合前端开发者的思维。
如果不指定 entry 时,saso 会依次寻找以下文件作为入口文件 index.html、 src/index.html、index.js、main.js、src/index.js、 src/main.js。
- fileHash
Type: Boolean
Default: true
在 production 模式下最终的文件是否需要带 hash,除非特殊需要,否则建议始终为 true
- globalConfig
Type: Object
Default: {}
使用 webpack Default plugin 配置全局的变量,不过 saso 对这个配置做了优化,允许你传入非字符串,面对非字符串,saso 会自动使用 JSON.stringify 处理
- htmlMinify
Type: Boolean | Object
只在
production模式下生效
production 模式下对 html 文件的压缩处理,参考minification
- minify
Type: terser | uglify
default: terser
使用 Uglifyjs 或者 Terser 对 js 进行压缩,默认使用 terser 并开启多线程压缩。
- mode
Type: String
Default: development
- outputPath
最终输出的文件夹,允许不传入绝对路径
Type: String
Default: dist
- plugins
Type: Array
- polyfillService
Type: Boolean String
Default: false
polyfill-service 的链接,当为 Boolean 值 true 的时候,默认使用国内阿里的CDN //polyfill.alicdn.com/polyfill.min.js 。
- port
Type: Number
Default: 10000
- publicPath
Type: String,
Default: /
webpack 的 publicPath 配置
- target
Type: async-node electron-main electron-renderer electron-preload node node-webkit web webworker
Default: web
webpack 的 target 选项,配置编译后的运行平台。
Hooks
saso 内部的工作原理是依赖于 钩子(Hooks) 的,在如今前端大繁荣的情况下,saso 不可能能够满足所有的情况,当你需要自定义 saso 时,那么这些 Hooks 将非常有用。
afterConfigure
处理完 saso 配置后触发
params: config
afterConfigureAsync
afterConfigure Async 版本
params: config
beforeCompile
webpack 编译前触发
params: webpackChain 一个 webpack-chain 实例
beforeCompileAsync
beforeCompile Async 版本
params: webpackChain
plugins
saso 的 plugin 分为 cli 的 plugin 和普通的 plugin。
cli 的 plugin 是为了拓展 saso 的命令,这在使用 saso 来拓展功能以符合团队需求时非常有用,如:你的团队想要通过 saso releaseCDN 这个命令来将你的静态资源一键发布到 CDN,这个需求便可以通过编写 saso 的 cli 命令来实现。
saso 的普通 plugin 通常是为了拓展 saso 的 webpack 配置,当然它还可以做很多其他的事情。
如果你熟悉 webpack 的 plugin 编写,saso 的 plugin 设计受到了 webpack 的启发,因此你能够快速编写你的 plugin。
接下来就是编写一个 cli plugin 和普通 plugin 的实例
TODO