Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fastpack/fastpack
Pack JS code fast & easy
https://github.com/fastpack/fastpack
bundler javascript
Last synced: 36 minutes ago
JSON representation
Pack JS code fast & easy
- Host: GitHub
- URL: https://github.com/fastpack/fastpack
- Owner: fastpack
- License: mit
- Created: 2017-06-15T07:37:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T13:46:06.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T15:35:41.812Z (about 1 month ago)
- Topics: bundler, javascript
- Language: OCaml
- Homepage: https://fastpack.sh
- Size: 7.4 MB
- Stars: 2,266
- Watchers: 37
- Forks: 42
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - fastpack - Pack JS code fast & easy (OCaml)
- awesome-repositories - fastpack/fastpack - Pack JS code fast & easy (OCaml)
- awesome-list - fastpack
- my-awesome - fastpack - Pack JS code fast & easy. (Tool)
README
# Fastpack
[](https://dev.azure.com/fastpack/fastpack/_build/latest?definitionId=1)
[](#backers)
[](#sponsors)
Pack JS code into a single bundle fast & easy.
## Why?
Because JavaScript builds should be faster!
Here is an example benchmark of bundling ~1600 modules together.
| | Fastpack| Parcel| Webpack
|----|:--:|:--:|:--:
| initial build| **0.730s**| 9.740s| 3.625s
| persistent cache| **0.171s**| 1.218s| N/A
| watch mode| **0.084s**| 0.503s| 0.473s
## Getting Started
Let's try building a simple React application!
```Bash
$ mkdir react-app
$ cd react-app
$ yarn init -y
$ yarn add react react-dom
$ yarn add --dev fastpack
$ yarn add --dev babel-loader babel-preset-react-app style-loader css-loader url-loader
```
**src/index.js**
```JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(, document.getElementById('root'));
```
**src/index.css**
```CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
```
**src/App.js**
```JavaScript
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
Welcome to React
To get started, edit src/App.js and save to reload.
);
}
}
export default App;
```
**src/App.css**
```CSS
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```
**index.html**
```HTML
React App
```
Also, add the `src/logo.svg` of your choice. Now let's add some config:
**.babelrc**
```JavaScript
{
"presets": ["react-app"]
}
```
And the fastpack configuration as well:
**fastpack.json**
```JavaScript
{
"entryPoints": ["src/index.js"],
"preprocess": [
{
"re": "^src.+\\.js$",
"process": "babel-loader"
},
{
"re": "\\.svg$",
"process": "url-loader"
},
{
"re": "\\.css$",
"process": "style-loader!css-loader"
}
]
}
```
*The above configuration can be alternatively specified using command-line
arguments, for more details run:*
```Bash
$ node_modules/.bin/fpack --help
```
We are good to go! Now run:
```Bash
$ node_modules/.bin/fpack build --dev
Cache: empty
Done in 0.817s. Bundle: 942Kb. Modules: 30.
$ open index.html
```
Voila! Now try running it again and see the power of the persistent cache!
```Bash
$ node_modules/.bin/fpack build --dev
Cache: used
Done in 0.032s. Bundle: 942Kb. Modules: 30.
```
For more configuration options and usage scenarios see
[Documentation](https://fastpack.sh/docs/get-started.html).
Have a question or want to contribute? Join us on [Discord](https://discord.gg/4HVCjDh)!
## Contributors
This project exists thanks to all the people who contribute.
Special thanks to [@camsong](https://github.com/camsong) for providing the
[fastpack](https://www.npmjs.com/package/fastpack) name on
[npmjs.com](npmjs.com)!
## Backers
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/fastpack#backer)]
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/fastpack#sponsor)]
