Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/z0al/minipack
An interactive webpack-based playground for the modern web ツ
https://github.com/z0al/minipack
babeljs cssnext html5 playground webpack webpack-plugin
Last synced: 3 months ago
JSON representation
An interactive webpack-based playground for the modern web ツ
- Host: GitHub
- URL: https://github.com/z0al/minipack
- Owner: z0al
- License: mit
- Archived: true
- Created: 2017-08-31T12:31:10.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-25T11:32:55.000Z (about 7 years ago)
- Last Synced: 2024-09-24T08:02:09.174Z (3 months ago)
- Topics: babeljs, cssnext, html5, playground, webpack, webpack-plugin
- Language: TypeScript
- Homepage:
- Size: 466 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Minipack
A webpack-based, local playground for the modern web technologies.
> **NOTE:** This project is currently in beta, if you find any issues please report it [here](https://github.com/ahmed-taj/minipack/issues)
## How it works
Internally, the playground is just a set of [webpack](https://webpack.js.org) plugins/loaders. We use the same, good, official webpack-dev-server to serve the final JavaScript bundle.
It works by walking through the current directory contents to determine suitable entry point files for webpack. An entry point file can be:
#### 1. index.[ext]:
Used to customize the HTML output (it will be transpiled if necessary).
**Example:**
```HTML
```
#### 2. app.[ext]:
Used as a start point for your JavaScript (it will be transpiled if necessary)
code, you should import all your scripts here.
**Example:**
```JavaScript
// app.js
console.log('Hello world');
```
#### 3. style.[ext]:
Used as a start point for your stylesheets (it will be transpiled if necessary).
You should import all your other styles here. Otherwise, you need import them in
your `app.[ext]` as you would normally do when using webpack.
**Example:**
```CSS
/* style.css */
body {
color: green;
}
```
You can think of these entry points as the HTML/CSS/JS tabs you would see in any
online playground such as [Codepen](https://codepen.io), [JSFiddle](https://jsfiddle.net/).
All of these files are optional.
### Extensions mapping
We use the file extensions as a source of truth in order to determine whether we need to perform transpilation or not.
| Extensions | Loader | Notes |
| :------------ | :------------------------------------------------------------ | :-------------------------------------------------- |
| **js,jsx,es** | [babel-loader](https://github.com/babel/babel-loader) | Using `preset-env` and `preset-react` |
| **html** | [html-loader](https://github.com/webpack-contrib/html-loader) | |
| **css** | [css-loader](https://github.com/webpack-contrib/css-loader) | In addition to `postcss-cssnext` and `autoprefixer` |
## Installation
```sh
$ npm install -g minipack
```
## Usage
```
Usage: mini [command] [options]
Commands:
start [options] Start a dev server in the current path
Options:
--version Show version number [boolean]
--help Show help [boolean]
If you have any problems, do not hesitate to file an issue:
https://github.com/glitchapp/glitch/issues/new
```
## Prerequisites
* **Node.js:** v8.4.0 (or later)
* **npm:** v5.4.0 (or later)
## Contributing
We value and appreciate your help, please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Ahmed T. Ali](https://github.com/ahmed-taj)
[📝](#blog-ahmed-taj "Blogposts") [💻](https://github.com/glitchapp/glitch/commits?author=ahmed-taj "Code") [🎨](#design-ahmed-taj "Design") [📖](https://github.com/glitchapp/glitch/commits?author=ahmed-taj "Documentation") [🤔](#ideas-ahmed-taj "Ideas, Planning, & Feedback") [🔌](#plugin-ahmed-taj "Plugin/utility libraries") [👀](#review-ahmed-taj "Reviewed Pull Requests") [⚠️](https://github.com/glitchapp/glitch/commits?author=ahmed-taj "Tests") |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
## Acknowledgments
Inspired by the awesome work of Facebook in their [create-react-app](https://github.com/facebookincubator/create-react-app) package.
This project would not have been possible without these great projects:
* [Node.js](https://nodejs.org)
* [webpack](https://webpack.js.org)
* [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
## License
This project is licensed under the [MIT License](./LICENSE) terms