1 | # Oceanifer
|
2 |
|
3 | A command line tool that helps browser module development.
|
4 |
|
5 |
|
6 | ## Usage
|
7 |
|
8 | Take some components that are developed using Oceanifier for example:
|
9 |
|
10 | 1. [yen][yen]
|
11 | 2. [ez-editor][ez-editor]
|
12 | 3. [heredoc][heredoc]
|
13 |
|
14 | The directory structure of yen looks like this:
|
15 |
|
16 | ```bash
|
17 | ➜ yen git:(master) tree . -I node_modules
|
18 | .
|
19 | ├── History.md
|
20 | ├── Readme.md
|
21 | ├── easing.js
|
22 | ├── events.js
|
23 | ├── index.js
|
24 | ├── package.json
|
25 | └── test
|
26 | ├── runner.html
|
27 | ├── runner.js
|
28 | ├── test.events.js
|
29 | └── test.yen.js
|
30 |
|
31 | 6 directories, 6 files
|
32 | ```
|
33 |
|
34 | Start the server with `ocean serve`:
|
35 |
|
36 | ```bash
|
37 | ➜ yen git:(master) ocean serve # --port 5000
|
38 | ```
|
39 |
|
40 | Then we can access `test/runner.html` via <http://localhost:5000/test/runner.html>.
|
41 | The magic lies in `runner.js`. In `runner.js` you can simply `require` any
|
42 | module you need.
|
43 |
|
44 | ```js
|
45 | mocha.setup('bdd')
|
46 |
|
47 | require('./test.events')
|
48 | require('./test.yen')
|
49 |
|
50 | mocha.run()
|
51 | ```
|
52 |
|
53 | As a matter of fact, every `.js` in `test` folder has the ability to require
|
54 | dependencies. Hence in both `test/test.yen.js` and `test/test.events.js`, we can
|
55 | do something like:
|
56 |
|
57 | ```js
|
58 | var yen = require('yen')
|
59 | var expect = require('expect')
|
60 |
|
61 | describe('yen', function() {
|
62 | it('works', function() {
|
63 | expect(yen('body')).to.be.a(yen)
|
64 | })
|
65 | })
|
66 | ```
|
67 |
|
68 | Oceanifier is smart enough to know that `yen` is a local module that reflects
|
69 | the `package.json` in current working directory.
|
70 |
|
71 |
|
72 | ## How Does It Work
|
73 |
|
74 | Behind the curtain, there is Oceanify. Oceanify introduces a code organization
|
75 | pattern like below:
|
76 |
|
77 | ```bash
|
78 | .
|
79 | ├── components # browser modules
|
80 | │ ├── stylesheets
|
81 | │ │ ├── base.css
|
82 | │ │ └── iconfont.css
|
83 | │ ├── arale
|
84 | │ │ └── upload.js
|
85 | │ ├── main.js
|
86 | │ └── main.css
|
87 | └── node_modules # dependencies
|
88 | └── yen
|
89 | ├── events.js
|
90 | ├── index.js
|
91 | └── support.js
|
92 | ```
|
93 |
|
94 | It provides a middleware to serve these components and modules. When browser
|
95 | requests kicks in, Oceanify will process and wrap them automatically.
|
96 |
|
97 |
|
98 |
|
99 | [oceanify]: https://github.com/erzu/oceanify
|
100 | [yen]: https://github.com/erzu/yen
|
101 | [ez-editor]: https://github.com/erzu/ez-editor
|
102 | [heredoc]: https://github.com/jden/heredoc
|