news.shamcode.ru | egoist / poi

egoist / poi

среда, 13 декабря 2017 г. в 03:14:09

⚡️ Delightful web development.

Badges

Introduction

Start writing an app with a single .js file, Poi could handle all the development setups for you, no more configuration hell.

Install Poi:

# Either globally
npm i -g poi
# Or locally (preferred)
npm i poi -D

Then populating an index.js and writing with your favorite framework like one of:

React / Preact

import React from 'react'
import { render } from 'react-dom'

const App = () => <h1>Hello React.</h1>

render(<App />, document.getElementById('app'))

Note: You need to install react react-dom and add jsx: 'react' in Poi's config file. For convenience, here's also poi-preset-react which adds both React JSX and React HMR support.

It's similar for other React-like framework.

Vue

import Vue from 'vue'

new Vue({
  el: '#app',
  render() {
    return <h1>Hello Vue.</h1>
  }
})

Note: You don't need to install any dependencies, vue is already brought by Poi. And single-file component is also supported by default.

Other

You can use existing presets such as poi-preset-riot and poi-preset-react to configure your framework to work with Poi, or contribute another preset for your desired framework.

To develop this file, run npx poi in your terminal and you can open http://localhost:4000 to preview!

So far we get:

Automatic transpilation and bundling (with webpack and babel/postcss)
Hot code reloading
Files in ./static are copied to dist folder, eg. static/favicon.ico to dist/favicon.ico

Build app in production mode (optimized and minified):

npx poi build

To change the path of entry file:

npx poi src/my-entry.js # development
npx poi build src/my-entry.js # production

Note that you don't need the npx prefix while using poi in npm scripts.

For full documentation, please head to https://poi.js.org

Resources

Check out awesome-poi, a curated list of awesome Poi resources.

FAQ

How's it different from a boilerplate?

It's hard to upgrade your project if you're using a boilerplate since you might change the code to suit your needs. However you can easily upgrade your project to use latest version of Poi by simply updating the dependency.

You can also get rid of boilerplate code in this way.

How does Poi manage dependencies for external frameworks?

Vue is included, other frameworks need to be installed alongside Poi in your project.

How to upgrade my app?

You can simply update poi and poi presets in your project, sometimes you might need yarn remove poi && yarn add poi --dev to ensure that poi's dependencies are updated too if you're using Yarn.

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Author

egoistian.com · GitHub @egoist · Twitter @_egoistlily