• This repository has been archived on 06/Dec/2021
  • Stars
    star
    5,243
  • Rank 7,890 (Top 0.2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

⚑A zero-config bundler for JavaScript applications.

⚠️ Poi has been deprecated, please migrate to Vite, contact me personally if you need help.


npm version build status npm downloads poi twitter

Poi is a bundler built on the top of webpack, trying to make developing and bundling apps with webpack as easy as possible.

The Poi project is supported by our Backers and funded through Patreon.

Features

  • πŸ“¦ Out of box support for JS, CSS, File assets and more.
  • βš› Framework-agnostic but also support JSX, Vue and more with no configs.
  • πŸ”Œ Great extensibility.
  • πŸ™ Fits most web apps, npm libs.
  • 🚨 Great development experience.

Quick Overview

Before we get started, ensure that you have installed Node.js (>=8) and Yarn (or npm) on your machine.

Get Started Immediately

yarn global add create-poi-app
create-poi-app my-app

cd my-app
npm run dev

Then open http://localhost:4000 to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

Get Started Manually

Inside an empty project, run yarn init or npm init to create a package.json and install Poi:

yarn init
yarn add poi --dev

Now all you need is to create an entry file, like if you're building a website, just create an index.js:

const el = document.createElement('div')
el.textContent = 'Hello Poi!'

document.body.appendChild(el)

Now if you run:

yarn poi --serve

You will get a URL like http://localhost:4000 which you can open to preview the app.

Next let's start adding some dependencies like a CSS file style.module.css:

.title {
  color: pink;
}
import styles from './style.module.css'

const el = document.createElement('div')
el.className = styles.title
el.textContent = 'Hello Poi!'

document.body.appendChild(el)

Save it and the browser will automatically reload to apply the changes!

Documentation

πŸ“š https://poi.js.org

You can improve it by sending pull requests to this repository.

Check out this repository for more examples.

Community

All feedback and suggestions are welcome!

  • πŸ’¬ Join the community on Spectrum.
  • πŸ“£ Stay up to date on new features and announcements on Twitter @poi__js.

Credits

Poi v12 wouldn't exist without the inspirations from following projects:

  • Webpack
  • Parcel 2
  • Poi itself
  • Vue CLI 3
  • Create React App

License

MIT Β© EGOIST

More Repositories

1

tsup

The simplest and fastest way to bundle your TypeScript libraries.
TypeScript
5,588
star
2

docute

πŸ“š Effortless documentation, done right.
JavaScript
3,725
star
3

devdocs-desktop

πŸ—‚ A full-featured desktop app for DevDocs.io.
JavaScript
3,133
star
4

vue-content-loader

SVG component to create placeholder loading, like Facebook cards loading.
JavaScript
3,025
star
5

hack

β›· Dead simple CSS framework.
CSS
2,587
star
6

vuepack

πŸ“¦ A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)
JavaScript
2,438
star
7

eme

Elegant Markdown Editor.
JavaScript
2,041
star
8

maid

Markdown driven task runner.
JavaScript
2,006
star
9

dum

An npm scripts runner written in Rust.
Rust
1,422
star
10

import-http

Import modules from URL instead of local node_modules
JavaScript
1,239
star
11

codepan

Like codepen and jsbin but works offline.
JavaScript
1,119
star
12

bili

Bili makes it easier to bundle JavaScript libraries.
TypeScript
1,047
star
13

esbuild-register

Transpile JSX, TypeScript and esnext features on the fly with esbuild
TypeScript
912
star
14

tailwindcss-icons

Use any icon (100,000+) from Iconify, for TailwindCSS
TypeScript
774
star
15

vue-timeago

A timeago component for Vue.
JavaScript
729
star
16

docup

The easiest way to write beautiful docs.
TypeScript
707
star
17

dropcode

A simple and lightweight code snippet manager.
TypeScript
676
star
18

rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.
JavaScript
673
star
19

vue-monaco

MonacoEditor component for Vue.js
JavaScript
651
star
20

vue-feather-icons

Simply beautiful open source icons as Vue functional components.
Vue
586
star
21

rollup-plugin-esbuild

Use ESBuild with Rollup to transform ESNext and TypeScript code.
TypeScript
566
star
22

vue-mugen-scroll

Infinite scroll component for Vue.js 2
JavaScript
546
star
23

vue-client-only

Vue component to wrap non SSR friendly components (428 bytes)
JavaScript
473
star
24

biu

🚨 An alert replacement
HTML
442
star
25

styled-vue

Use dynamic styles in Vue single-file components.
JavaScript
428
star
26

package-size

Get the bundle size of an npm package.
JavaScript
422
star
27

tooling

Modular JavaScript Tooling.
JavaScript
417
star
28

vue-router-prefetch

Prefetch links when they are visible in viewport.
JavaScript
383
star
29

node-vs-deno

A Deno guide for Node.js developers
363
star
30

presite

A static site generator based on Puppeteer.
TypeScript
331
star
31

esmon

like nodemon but very esbuild.
TypeScript
324
star
32

franxx

A vanilla JavaScript router that works everywhere.
TypeScript
321
star
33

ts-lib-starter

My minimal TypeScript library starter
TypeScript
269
star
34

vue-final-form

🏁 High performance subscription-based form state management for Vue.js.
Vue
265
star
35

hanabi

πŸ’₯ Highlight any code, in a colorful way. (seriously 700 bytes)
JavaScript
245
star
36

lit-vue

πŸ”₯ Vue SFC goodies directly in JavaScript files.
JavaScript
244
star
37

Miu

🚫 [Deprecated] Miu is a Markdown Editor for Windows (Do not star, this code looks like a sh*t)
JavaScript
241
star
38

tooling.one

A collection of useful tools for developers.
TypeScript
239
star
39

svg-to-vue-component

Transform SVG files into Vue SFC (with hot reloading and SVGO support)
JavaScript
234
star
40

haya

⚑️ esbuild based dev server and production bundler, it's really fast
TypeScript
231
star
41

awesome-esbuild

A curated list of awesome esbuild resources
225
star
42

vue-dts-gen

Generate `d.ts` from `.vue` files.
TypeScript
220
star
43

bget

Download and install binaries from GitHub Releases, interactively.
Go
216
star
44

vue-emotion

Seamlessly use emotion (CSS-in-JS) with Vue.js
JavaScript
214
star
45

vite-plugin-mix

Adding backend API to your Vite app.
TypeScript
210
star
46

mordred

[Experimental] Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.
TypeScript
206
star
47

eva.js

πŸ’« A complete solution to building modern webs with Vue.js and its friends.
JavaScript
205
star
48

next-fullstack-starter

Next.js + Prisma + TailwindCSS +TRPC
TypeScript
202
star
49

openai-proxy

OpenAI proxy on Cloudflare Worker / Vercel Edge
TypeScript
201
star
50

vue-inter

Simple yet powerful 1kB i18n library for Vue.js
JavaScript
198
star
51

vue-to-react

Turn a Vue component into a React component.
TypeScript
197
star
52

vue-media

A CSS media query component for Vue.js
JavaScript
194
star
53

typed-worker

Type-safe and Promisified API for Web Worker and Iframe
TypeScript
191
star
54

evangelion-card

Generate Evangelion title card like a boss 😎
Vue
188
star
55

vue-html

An alternative to Vue template and Vue JSX
JavaScript
186
star
56

prisma-repl

REPL for Prisma databases.
TypeScript
185
star
57

unplugin-swc

SWC plugin for Vite and Rollup
TypeScript
185
star
58

testen

βœ”οΈ Run tests for multiple versions of Node.js in local env.
JavaScript
175
star
59

vue-cli-gui

GUI for vue-cli UI.
JavaScript
165
star
60

vmark

Convert markdown to Vue component.
JavaScript
164
star
61

bina

An installer for self-contained, single-file binaries, no additional CLI needed.
TypeScript
163
star
62

vue-compile

Compile the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.
TypeScript
158
star
63

is-trademarked-cli

ℒ️ CLI tool to check if a word is trademarked.
JavaScript
158
star
64

play-esbuild

esbuild online playground
TypeScript
157
star
65

vue-prism-component

highlight code using prism.js and vue component
JavaScript
156
star
66

native-toast

Native-like toast notification but for the web.
HTML
150
star
67

loglive

Render changelog as a website on the fly.
JavaScript
149
star
68

logbox

View console logs and errors on any website without opening the devtools
TypeScript
148
star
69

vue-isomorphic-starter

Vue server-side rendering in real life. ~(≧▽≦)/~
JavaScript
146
star
70

vue-ga

Google Analytics for Vue.js
JavaScript
142
star
71

tokio

Web scraping made simple.
JavaScript
142
star
72

taki

Take a snapshot of any website.
TypeScript
140
star
73

esbuild-plugin-vue

Basic .vue support for esbuild.
TypeScript
137
star
74

joycon

Find and load config files with joy.
JavaScript
133
star
75

vue-preload

Preloading data for Vue
JavaScript
133
star
76

bundle-require

bundle and `require` a file, the same way Vite loads `vite.config.ts`
TypeScript
133
star
77

vitekit

Remix and Vite had a baby. [WIP]
TypeScript
132
star
78

md

A markdown parser and compiler. Built for speed.
JavaScript
130
star
79

io-spin

TJ Holowaychuk's go-spin node.js port
JavaScript
125
star
80

vue-windows

Vue components for creating neat windows.
Vue
125
star
81

tsno

`node` with typescript support, importing from URL, etc.
TypeScript
118
star
82

data-tip.css

πŸ’ˆ Wow, such tooltip, with pure css!
HTML
117
star
83

eventstop

A minimal event library for Node.js and browser.
JavaScript
115
star
84

kanpai

🍻 Kanpai is a better way to publish npm packages.
TypeScript
111
star
85

preader

Extract the main content from a web page.
TypeScript
111
star
86

esbuild-service

esbuild as a service. bundle any npm package on the fly as you request.
Go
108
star
87

app-loading

Focus on Medium-like app loading style
JavaScript
104
star
88

vue-slim-tabs

A slim tab component for Vue.js (1.3 kB minified)
Vue
103
star
89

gh-pinned-repos

API service for retrieving pinned repos on GitHub.
TypeScript
103
star
90

follower-count

Get follower count for Instagram, Twitter, TikTok, Youtube accounts
TypeScript
102
star
91

vite-plugin-compile-time

Some compile-time magic for your Vite project
TypeScript
101
star
92

ideas

πŸ’‘ideas / thoughts / polls from egoist
101
star
93

doko

A docker-based development dependency manager.
TypeScript
101
star
94

nswatch

Like gulp.watch but for npm scripts.
TypeScript
100
star
95

npm-size

Get the install size of an npm package.
JavaScript
99
star
96

vue-head

Document <head> manager for Vue 3, SSR ready.
TypeScript
98
star
97

logo-maker

create a simple logo..
CSS
97
star
98

always-bet-on-vue

Chunibyo's overwhelming victory
96
star
99

hakka

ALPHA. A reddit-like online community (but less noisy).
TypeScript
96
star
100

feedbackok-js

Collecting feedback with ease.
TypeScript
94
star