Browse Source

make a start on what is rollup

master
Rich-Harris 9 years ago
parent
commit
27fa593a0d
  1. 51
      src/guide/00-what-is-rollup.md
  2. 2
      src/guide/98-faqs.md
  3. 2
      src/guide/section.html

51
src/guide/00-what-is-rollup.md

@ -2,13 +2,54 @@
title: What is Rollup?
---
Rollup is a JavaScript module bundler.
Rollup is a JavaScript module bundler. It allows you to write your application or library as a set of modules – using modern ES2015 `import`/`export` syntax – and bundle them up into a single file that you can easily include on an HTML page as a `<script>` tag, or distribute via package managers like [npm](https://npmjs.com).
### What are modules, and why should we use them?
A module is just a JavaScript file that is explicit about what it needs in order to run, and what code it makes available to the outside world. Breaking your program apart like this makes it much easier to write good, maintainable code, because you only need to focus on one thing at a time. Suppose you were writing a spellchecker for a web app:
```js
import foo from './foo.js';
import bar from './bar.js';
import dictionary from './dictionary.js';
import { extractWords } from './string-utils.js';
export default function spellcheck ( text ) {
var words = extractWords( text );
var mistakes = [];
words.forEach( function ( word ) {
if ( !dictionary.contains( word.text ) ) {
mistakes.push({
start: word.start,
end: word.end,
suggestions: dictionary.getSuggestions( word.text )
});
}
});
/* ... */
}
```
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
We don't need to worry about the implementation of `extractWords` – how it deals with punctuation and so forth. And we don't need to worry about where `dictionary` gets its data from, or what algorithm it uses to generate suggestions. All we need to worry about is what to do when we find mistakes.
Now imagine writing all the relevant logic in a single file. It would quickly become very large, and very difficult to maintain.
In short, modules help us write code that is
* reusable
* maintainable
* testable
* easier to collaborate on, because Alice and Bob can work on the same app simultaneously (Alice can work on `dictionary` while Bob fixes `extractWords`) without stomping each other's changes
* more bug-resistant, because we don't need to worry about things like naming conflicts between modules
For a while, JavaScript have been using CommonJS modules and AMD modules as well as various ad hoc formats, but the modern `import`/`export` syntax has a number of [crucial advantages](#why-are-es2015-modules-better-than-amd-and-commonjs-).
### Why do we need to bundle our modules?
For one thing, ES2015 modules don't yet work in browsers or Node.js, so we need to convert them into a usable format. Rollup lets you create AMD modules (for use with tools like [Require.js](http://requirejs.org/)), CommonJS modules (which run in Node.js), self-executing bundles (for inclusion on a page as a `<script>` tag), or Universal Module Definition modules, which work in all environments.
But there are also some major advantages to bundling your code:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
TK

2
src/guide/98-faqs.md

@ -2,4 +2,4 @@
title: Frequently asked questions
---
TODO
### Why are ES2015 modules better than AMD and CommonJS?

2
src/guide/section.html

@ -1,4 +1,4 @@
<section id='{{slug}}'>
<h3>{{title}}</h3>
<h2>{{title}}</h2>
{{html}}
</section>

Loading…
Cancel
Save