Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahyiru/pack
@huxy/pack 是一个项目构建工具,集成了 esbuild、eslint、stylelint、jest、commitlint、husky、standard-version、postcss、prettier,提供开发环境、构建打包、本地启动服务、环境配置、代理配置等功能。
https://github.com/ahyiru/pack
commitlint esbuild eslint husky jest nodejs postcss stylelint webpack
Last synced: 6 days ago
JSON representation
@huxy/pack 是一个项目构建工具,集成了 esbuild、eslint、stylelint、jest、commitlint、husky、standard-version、postcss、prettier,提供开发环境、构建打包、本地启动服务、环境配置、代理配置等功能。
- Host: GitHub
- URL: https://github.com/ahyiru/pack
- Owner: ahyiru
- License: mit
- Created: 2023-02-15T09:49:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-06T05:30:54.000Z (6 months ago)
- Last Synced: 2024-05-07T05:34:06.871Z (6 months ago)
- Topics: commitlint, esbuild, eslint, husky, jest, nodejs, postcss, stylelint, webpack
- Language: JavaScript
- Homepage:
- Size: 237 KB
- Stars: 53
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## @huxy/pack
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ahyiru/pack/blob/develop/LICENSE)
[![npm version](https://img.shields.io/npm/v/@huxy/pack.svg)](https://www.npmjs.com/package/@huxy/pack)
[![npm](https://img.shields.io/npm/dt/@huxy/pack)](https://www.npmjs.com/package/@huxy/pack)
[![](https://img.shields.io/badge/blog-ihuxy-blue.svg)](http://ihuxy.com/)`@huxy/pack` 是一个项目构建工具,集成了 `esbuild`、`eslint`、`stylelint`、`jest`、`commitlint`、`husky`、`standard-version`、`postcss`、`prettier`,提供开发环境、构建打包、本地启动服务、环境配置、代理配置等功能。使用简单方便,功能齐全,配置灵活,可自己添加需要的功能插件。
运行时会自动生成插件配置文件,如 `babel.config.js` 文件等,可自行修改覆盖。
生成项目配置文件 `.huxy/app.configs.js` ,用户自行配置即可。
### app.configs
用户环境配置:
```javascript
const app = {
// entry: 'app', // 项目入口目录,默认 app 文件夹
// HOST: 'http://localhost', // 本地运行
PORT: 8080, // 本地开发环境端口
PROD_PORT: 8081, // 本地生产环境端口
PUBLIC_DIR: 'public', // public 文件路径
BUILD_DIR: 'build', // 构建产物路径
DEV_ROOT_DIR: '/', // 开发环境 basepath
// PROD_ROOT_DIR: '/huxy', // 生产环境 basepath
projectName: 'XX平台', // 名称,页面初始化 title
/* PROXY: { // 代理配置
url: 'http://127.0.0.1:9000',
prefix: '/api',
}, */
envConfigs: { // 全局环境变量
name: '项目名',
_id: '其它属性',
},
};const webpack = { // webpack 配置
// ... // 基础配置
dev: { // 开发环境配置
// ...
},
prod: { // 生产环境配置
// ...
},
};const nodeServer = app => { // 本地 nodejs 服务配置
app.get('/local/test', (req, res, next) => {
console.log(req);
});
};export default {
app,
webpack,
nodeServer,
};// 例如
export default {
app,
webpack: (rootPath, appPath) => ({
resolve: {
alias: {
'@huxy': `${rootPath}/playground/huxy`,
},
},
prod: {
copy: [ // 拷贝文件
{
from: `${appPath}/public/robots.txt`,
to: `${appPath}/build/robots.txt`,
},
],
buildConfigs: {
target: 'es2018',
minify: true,
},
},
}),
};
```- copy:构建完成拷贝文件或文件夹。
- buildConfigs:打包资源配置,见 esbuild 配置项。`webpack` 配置项可以是一个配置对象,也可以是一个带有 `rootDir` 和 `appPath` 的回调函数。当要使用到路径时,请使用回调函数来获取根目录路径和 `app` 路径。
### 运行命令
```
"start": "pack start",
"build": "pack run build",
"analyze": "pack run analyze",
"server": "pack run server",
"test": "pack run test",
```其它 `npm` 命令:
```
"eslint": "pack eslint 'app/**/*.{js,jsx}'", // 或直接使用 eslint
"eslint-common": "eslint 'common/**/*.{js,jsx}'",
"stylelint": "stylelint 'app/**/*.{css,less}'",
"lint-fix": "eslint --fix 'app/**/*.{js,jsx}' && stylelint --fix 'app/**/*.{css,less}'",
"prettier": "prettier 'app/**/*' --write --ignore-unknown",
"release": "standard-version"
```### 使用
新建一个项目,创建 `public` 和 `app` 目录。
- public:静态资源目录,存放 `index.html` 和 `favicon` 等。可使用 `app.configs` 里面的 `PUBLIC_DIR` 来配置路径,默认 `public ` 放在 `app` 目录里面。
- app:存放项目代码文件,也是入口文件夹。可自己命名,如 `src`,在配置文件里配置 `entry: 'src'` 即可。安装 `@huxy/pack`
```
npm i -D @huxy/pack
```然后在 `package.json` 里面创建上面运行命令里的 `scripts` ,就可运行了。
***版本 0.6+ 使用了 `esmodule`,只需在 `package.json` 里面设置 `"type": "module"` 即可。***