preact-boilerplate
Lightweight react/preact boilerplate with support for inline CSS, automatic code splitting and async scripts.
Last updated 4 months ago by feliperohde .
MIT · Original npm · Tarball · package.json
$ cnpm install preact-boilerplate 
SYNC missed versions from official npm registry.

Lightweight preact/react boilerplate with support for inline CSS, automatic code splitting and async scripts.

	yarn add preact --dev preact-boilerplate
	
	## to build
	./node_modules/preact-boilerplate/run build 
		--env.title="Your%20Title" (required)
		--env.analyze {boolean} (optional, default: false) // launch webpack bundle analyzer
		--env.react {boolean} (optional, default: false)
		--env.uglify {boolean} (optional, default: true)
		--env.template {string} (optional)
		--env.inlineCss {boolean} (optional, default: true)
	
	## to dev
	./node_modules/preact-boilerplate/run dev 
		--env.title="Your%20Title"
		--env.react {boolean} (optional, default: false)
		--env.template {string} (optional)

	## sample
	
	// import style from './index.scss'; // global scoped css
	import style from './index.local.scss'; // local scoped scss
	import {
		h,
		render
	} from 'preact';
	
	## src/Main.js
	import AsyncComponent from 'async!./AsyncComponent';

	const a = {
		b: {
			c: {
				d: value => value
			}
		}
	};

	const App = () => {
		return (
			<h1 class={style.a}>
				{a.b?.c?.d?.('hi') || 'not defined'}
			</h1>
		);
	}

	render(<AsyncComponent />, document.body);

	## src/AsyncComponent.js
	import {
		h,
		render
	} from 'preact';

	import image from './files/someImage.png';

	export default () => {
		return (
			<section>
				<h2>{process.env.NODE_ENV && 'production'} is production!</h2>
				<h2>{PRODUCTION && 'production'} is production!</h2>
				<img src={image} class={style.image}/>
			</section>
		);
	};

	## output minified html w/ (google style) inline css, bundles and scripts to preload ASAP

	<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="preload" as="script" href="0.b952a.js"><style>._1P_ln{background-color:#d7006c;color:#fff}._1P_ln ._3bxXE{color:red;-webkit-box-shadow:none;box-shadow:none;border-radius:0}</style></head><body><script defer="defer" src="main.b952a.js"></script></body></html>

Current Tags

  • 2.0.4                                ...           latest (4 months ago)

17 Versions

  • 2.0.4                                ...           4 months ago
  • 2.0.3                                ...           4 months ago
  • 2.0.1                                ...           4 months ago
  • 2.0.0                                ...           4 months ago
  • 1.0.12                                ...           2 years ago
  • 1.0.11                                ...           2 years ago
  • 1.0.10                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 18
Last Day 0
Last Week 1
Last Month 2
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |