preact-boilerplate
v2.0.5
Published
Lightweight react/preact boilerplate with support for inline CSS, automatic code splitting and async scripts.
Downloads
9
Readme
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>