Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/packingjs/generator-packing

Last synced: 30 days ago
JSON representation

Host: GitHub
URL: https://github.com/packingjs/generator-packing
Owner: packingjs
Created: 2016-07-19T03:44:45.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2023-04-17T08:49:53.000Z (over 1 year ago)
Last Synced: 2024-11-07T21:46:17.817Z (about 2 months ago)
Language: JavaScript
Size: 1.09 MB
Stars: 0
Watchers: 3
Forks: 0
Open Issues: 5
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

README

# generator-packing

一个快速生成 [Packing](https://packingjs.github.io/) 工程的手脚架工具。

## 特点
* 不依赖 host 文件，根据环境自动切换资源路径
* 节约开发服务器，多分支开发部署到同一台服务器不会相互覆盖
* 提供资源包体积分析报告
* 自动生成模版文件

## 使用步骤
1. 全局安装`yo`和`generator-packing`
```
npm install -g yo generator-packing
```

1. 在目标目录运行以下命令，该命令会帮助你完成工程初始化和依赖包安装
```
yo packing
```

1. 启动开发模式
```
npm run serve
```
如果上面的代码运行不报错的话，就可以在 `http://localhost:8081` 预览网站了

## 命令
* **npm start**: 启动开发模式
* **npm start:dist**: 预览编译后的工程
* **npm build**: 本地编译
* **npm build:dev**: 编译到开发机
* **npm build:beta**: 编译到测试机
* **npm build:prod**: 编译到线上机
* **npm serve**: `npm start` 的别名
* **npm serve:dist**: `npm start:dist` 的别名
* **npm lint**: 代码检查

## 目录结构

```
.
├── /assets/ # 图片字体等资源
│ ├── /images/ # 图片（示例）
│ └── /fonts/ # 字体（示例）
├── /config/
│ ├── /packing.js # packing配置
│ ├── /webpack.build.babel.js # webpack编译配置
│ ├── /webpack.dll.babel.js # webpack DllPlugin编译配置
│ └── /webpack.serve.babel.js # webpack开发环境配置
├── /mock/
│ ├── /api # 异步请求接口模拟数据存放目录
│ │ └── /now.js # /api/now接口模拟数据（示例）
│ └── /pages # 初始化网页的模拟数据
│ ├── /__global.js # 所有页面初始化通用的数据
│ ├── /index.js # /index页面初始化的数据（示例）
│ └── /about.js # /about页面初始化的数据（示例）
├── /profiles/
│ ├── /beta.env # 测试环境profile文件
│ ├── /development.env # 开发环境profile文件
│ ├── /local.env # 本地环境profile文件
│ └── /production.env # 线上环境profile文件
├── /src/
│ ├── /common/ # 公共代码
│ ├── /pages/ # DllPlugin插件编译配置
│ │ ├── /index/ # 首页的资源文件（示例）
│ │ │ ├── /entry.js # entry pointer
│ │ │ └── /entry.settings.js # 自动生成模版使用的配置文件（可选）
│ │ └── /about/ # about页的资源文件（示例）
│ │ │ ├── /entry.js # entry pointer
│ │ │ └── /entry.settings.js # 自动生成模版使用的配置文件可选）
│ └── /templates # 模版文件
│ ├── /layout/ # （pug用的）模版布局文件
│ └── /pages/ # 用来生成页面的模版文件
├── /util/ # util
├── .babelrc # babel配置
├── .env # NODE_ENV环境变量配置，该文件不要提交到git仓库
├── .eslintrc.js # eslint配置
├── build.sh # jenkins发布调用的脚本
├── pom.xml # 前后端关联maven配置
├── postcss.config.js # postcss配置
└── README.md
```

## packing.js 配置说明
```js
{
/**
* 工程使用的编译平台
* 目前支持
* - portal
* - qdr
* @type {string}
*/
ci: 'portal',

/**
* 本地访问的域名
* 如果需要使用 `qunar.com` 的 cookie，需要改成类似 `my.qunar.com` 这种
* @type {string}
*/
localhost: 'localhost',

/**
* webserver 端口
*/
port: {
/**
* 开发环境 webserver 端口
* @type {number}
*/
dev: 8081,

/**
* 预览编译结果时 webserver 端口
* @type {number}
*/
dist: 8080
},

/**
* 文件路径配置
* 所有目录都使用相对于项目根目录的相对目录格式
*/
path: {
/** 源文件相关路径 */
src: {
/**
* 源文件根目录
* @type {string}
*/
root: 'src',

/**
* 模版文件路径
* 相对于 `src.root` 的相对地址
* 若不区分布局文件和网页文件，请直接传入字符串
* @type {(string|object)}
*/
templates: {
layout: 'templates/layout',
pages: 'templates/pages'
}
},

/** 编译输出文件相关路径 */
dist: {
/**
* webpack 编译产物输出目录
* 即 `webpack.config.output.path` 参数
* portal dev 发布时要求输出到 `dev` 目录
* qdr dev 发布时要求输出到 `prd` 目录
* @type {string}
*/
root: process.env.NODE_ENV === 'development' ? 'dev' : 'prd',

/**
* 模版文件路径
* 相对于 `dist.root` 的相对地址
* 若不区分布局文件和网页文件，请直接传入字符串
* @type {(string|object)}
*/
templates: {
layout: 'templates/layout',
pages: 'templates/pages'
},

/**
* JavaScript 输出目录
* @type {string}
*/
js: 'js',

/**
* CSS 输出目录
* @type {string}
*/
css: 'css'
},

/**
* 页面初始化 mock 数据文件存放目录
* @type {string}
*/
mockPages: 'mock/pages',

/**
* dllPlugin 编译输出物临时存放目录
* @type {string}
*/
tmpDll: '.tmp/dll',

/**
* 打包入口文件
* @type {(string|object|function)}
* @example
* // string
* entries: './src/entries/index.js'
* @example
* // object
* entries: {
* index: './src/entries/index.js',
* abc: './src/entries/abc.less'
* }
* @example
* // function
* entries: () => {}
*/
entries: () => {
const entryFileName = 'entry.js';
const entryPath = 'src/pages';
const entryPattern = `**/${entryFileName}`;
const cwd = path.resolve(context, entryPath);
const config = {};
packingGlob(entryPattern, { cwd }).forEach((page) => {
const key = page.replace(`/${entryFileName}`, '');
config[key] = path.join(cwd, page);
});
return config;
}
},

/** 模版配置 */
template: {
/**
* 是否启用 packing template
* @type {bool}
*/
enabled: true,

/**
* packing template 选项
* @type {object}
*/
options: {
/**
* 模版引擎类型
* 目前支持
* - html
* - pug
* - ejs
* - handlebars
* - smarty
* - velocity
* @type {string}
*/
engine: 'pug',

/**
* 模版文件扩展名
* @type {string}
*/
extension: '.pug',

/**
* 是否根据 `entry pointer` 自动生成网页文件
* 如需兼容 packing@<3.0.0 的工程，该值设置为 false
* @type {bool}
*/
autoGeneration: true,

/**
* 是否往模版中注入 assets
* @type {bool}
*/
inject: true,

/**
* JavaScript Chunk 注入的位置
* - 'head': 在前注入
* - 'body': 在