# generator-mod-browserify

> Create a webapp with mod.js and browserify

Latest version **0.5.1** (published 2015-01-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install generator-mod-browserify
pnpm add generator-mod-browserify
yarn add generator-mod-browserify
bun add generator-mod-browserify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.1 |
| Published | 2015-01-15 |
| First published | 2015-01-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.10.0 |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | imbinnng@gmail.com |
| Maintainers | binnng |
| Keywords | yeoman-generator, web, app, front-end, h5bp, modernizr, jquery, grunt |

## Links

- npm: https://www.npmjs.com/package/generator-mod-browserify
- Repository: https://github.com/binnng/generator-mod-browserify
- Issues: https://github.com/binnng/generator-mod-browserify/issues
- npm.io page: https://npm.io/package/generator-mod-browserify

## Dependencies (4)

- [chalk](https://npm.io/package/chalk.md) ^0.5.1
- [yosay](https://npm.io/package/yosay.md) ~1.0.0
- [cheerio](https://npm.io/package/cheerio.md) ^0.17.0
- [yeoman-generator](https://npm.io/package/yeoman-generator.md) ~0.17.3

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.5.1 (latest) — 2015-01-15

## README

generator-mod-browserify
======

![yo](https://cloud.githubusercontent.com/assets/2696107/5752010/1b413f02-9ca8-11e4-8fd9-c03f34d72f40.jpg)


> 基于 **mod.js** 和 **browserify** 的Yeoman生成器。


### 准备

你需要事先了解这几样东西

1. [Yeoman](http://yeoman.io/)
2. [CommonJs](http://javascript.ruanyifeng.com/nodejs/commonjs.html)
3. [browserify](http://browserify.org/)
4. [generator-webapp](https://github.com/yeoman/generator-webapp)

项目基于[generator-webapp](https://github.com/yeoman/generator-webapp)做了很多扩展。


简单介绍下browserify：

> 将符合CommonJs规范的js代码生成浏览器可以直接执行的js代码。

比如：

```
// a.js
module.exports = "this is a.js"
```

```
// b.js
var a = require(./a.js);
console.log(a); // "this is a.js"
```

通过browserify，会将`a.js`和`b.js`合并成浏览器执行的js代码。

### 安装

##### 安装`Yo`

你需要安装`Yo`，具体安装方法可以看看[这里](http://yeoman.io/learning/index.html)。

###### 安装`Generator`

```
npm install generator-mod-browserify -g
```

### 使用

##### Yo一下

```
yo mod-browserify
```


##### 目录结构

```
app
 |-- components bower或者components外部依赖
 |-- images
 |-- styles
   |-- app.scss 主入口css文件
 |-- scripts
   |-- app.js 主入口js文件
   |-- imports 待导入到app.js的所有js文件
   |-- modules 本地模块
tasks grunt拆分任务目录
```

### 说明

##### `app/components`
使用bower或者component安装的目录，不一定都是符合CommonJs规范。

建议对于外部依赖提供的方法，都写在`app/scripts/imports/define.js`里：

```
var $ = window("$");
var Broadcast = require("binnng/broadcast");
```

###### **注意**

这里的`require`是mod.js(`app/components/mod.js/mod.js`)提供的方法，便于引入`app/components`里符合CommonJs规范的js文件，这也是我引入`mod.js`的主要原因。

当然，如果符合CommonJs规范，你也可以写在`app/scripts/modules`里：

```
var domify = require("../components/domify/domify.js");
```

如果多个模块都要使用domify这个方法，那就得在`modules`文件里写很多遍上面的代码，所以还是建议写在`app/scripts/imports/define.js`里

```
var domify = require("domify");
```

`modules`里直接使用domify这个方法就行。

##### tasks

这是拆分了的grunt任务目录

具体可以看看我这个项目：[grunt-task-module](https://github.com/binnng/grunt-task-module)

主要作用是：

> 拆分grunt任务，免得`gruntfile.js`越来越长，越来越难以维护。

### 功能

除了基本的[generator-webapp](https://github.com/yeoman/generator-webapp)提供的grunt服务，还做了些扩展。

##### grunt publish
发布
build后如果要做些特殊处理，可以写在`tasks/publish.js`里。

##### grunt doc
生成js(Coffee)文档。
可以看看[docco](http://jashkenas.github.io/docco/)。

##### grunt serve:doc
访问文档。

---
_Source: https://npm.io/package/generator-mod-browserify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._