component-bundler - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/user-pages.js

		@@ -59,3 +59,3 @@ var flatten = require('component-resolver').flatten;
		// bundle everything in boot
		exports[boot] = flatten(locals[boot])
		out[boot] = flatten(locals[boot])
		.map(function (branch) {
		@@ -62,0 +62,0 @@ branch.bundle = boot;

package.json

		{
		"name": "component-bundler",
		"description": "bundlers and bundling guide for component",
		"version": "0.0.3",
		"version": "0.0.4",
		"author": {
		@@ -6,0 +6,0 @@ "name": "Jonathan Ong",

README.md

		# Component Bundler

		This is a bundler utility and guide for component. Not all bundling methods will be included in this repo, but it should help you create your own bundlers.
		This is a bundler utility and guide for component. Not all bundling methods will be included in this repo,
		but it should help you create your own bundlers. You should know how [builder2](https://github.com/co

		You can see each bundler in [lib/](https://github.com/component/bundler.js/tree/master/lib).
		You can see two bundlers in [lib/](https://github.com/component/bundler.js/tree/master/lib) for a different directory structures.
		Use these included bundles as __instructional examples__ to create your own bundles.
		Creating your own bundler tailored for your app will be easier than trying to use one of these bundlers in your app.

		## Example

		This bundler uses [resolver.js](https://github.com/component/resolver.js):
		This bundler uses [resolver.js](https://github.com/component/resolver.js) and [builder2](https://github.com/component/builder2.js).
		Maybe you need to read how they work.

		```js
		var fs = require('fs');
		var path = require('path');

		var build = require('component-builder');
		@@ -18,7 +25,12 @@ var resolve = require('component-resolver');
		// based on the `.locals` of a specific `component.json`
		var bundle = bundler.pages(require('./component.json'));
		var options = {
		root: path.join(__dirname, 'app'), // where your main component.json is located
		build: path.join(__dirname, 'build') // component build output
		}
		var json = require(path.join(options.root, 'component.json'));
		var bundle = bundler.pages(json);

		// resolve the dependency tree
		// while also installing any remote dependencies
		resolve(process.cwd(), {
		resolve(options.root, {
		install: true
		@@ -33,7 +45,18 @@ }, function (err, tree) {
		Object.keys(bundles).forEach(function (name) {
		build.styles(bundles[name]).build(function (err, css) {
		// do something with the output
		build.styles(bundles[name])
		.use('styles', build.plugins.css())
		.build(function (err, css) {
		if (err) throw err;
		var file = path.join(options.build, name + '.css');
		fs.writeFileSync(file, css, 'utf8');
		});
		build.scripts(bundles[name]).build(function (err, js) {
		// do something with the output
		build.scripts(bundles[name])
		.use('scripts', build.plugins.js())
		.build(function (err, js) {
		if (err) throw err;
		if (name === json.locals[0]) {
		js = build.scripts.require + js; // add require impl to boot component
		}
		var file = path.join(options.build, name + '.js');
		fs.writeFileSync(file, js, 'utf8');
		});
		@@ -44,3 +67,3 @@ });

		Where your main `component.json` looks something like:
		Where your main `app/component.json` looks something like:

		@@ -75,3 +98,3 @@ ```json

		Generally you'll see component apps with the main component that looks like:
		Generally you'll see component apps with the [main component](https://github.com/component/guide/blob/master/creating-apps-with-components/entry-points.md) that looks like:

		@@ -98,3 +121,3 @@ ```json

		However, you still `require('./lib/boot.js')` as before. The difference now is that the resolver will now resolve the dependencies of all the bundles in one go. Each bundle is now its own entry point as long as they are not included in another bundle. Thus, to use a bundle, you'll have to include all its dependencies and `require('./lib/bundle-a')` to initialize it.
		However, you still `require('./lib/boot.js')` as before. The difference now is that the resolver will now resolve the dependencies of all the bundles in one go. Each bundle is now its own entry point as long as they are not included in another bundle. These "shared dependencies" are included into the first component (boot). Thus, to use a bundle, you'll have to include all its dependencies and `require('./lib/bundle-a')` to initialize it.

		@@ -105,2 +128,5 @@ Remember you can't do `require('app')` as `app` itself contains no scripts.

		There are cases, where you don't have a boot component (none or multiple). In other words: if your first component has scripts that shouldn't be mixed with other bundles.
		You can define your `locals` of your main component: `["common", "bundle-a", "bundle-b", "bundle-c"]` and create a file with an empty object (`{}`) at this path `lib/common/component.json`.

		It is up to the developer to correctly include script and style tags in the document:
		@@ -113,3 +139,3 @@

		It is also wise to "autorequire" each build so you don't have to do the following:
		It is also wise to "autorequire" each build in your bundler script so you don't have to do the following:

		@@ -126,3 +152,3 @@ ```html
		Unless you want to execute each bundle manually.
		Note that each component's entry point is its location relative to `process.cwd()` without any extensions.
		Note that each component's entry point is its location relative to the first parameter passed to the resolver (`options.root`).
		In other words, `./lib/boot` is the `boot` folder located within `lib/`.
		@@ -129,0 +155,0 @@

component-bundler - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics