New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

fastpack

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

fastpack

Pack JS code fast & easy.

0.9.1
latest
Source
npm

Version published: 6 years ago

Weekly downloads: 19; increased by111.11%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

Fastpack

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 the simple React application!

  $ 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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

src/index.css

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

src/App.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

<!DOCTYPE html>
<html>
<head><title>React App</title></head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./bundle/index.js"></script>
</body>
</html>

Also, add the src/logo.svg of your choice. Now let's add some config:

.babelrc

{
    "presets": ["react-app"]
}

And the fastpack configuration as well:

fastpack.json

{
    "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:

  $ node_modules/.bin/fpack --help

We are good to go! Now run:

  $ 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!

  $ 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.

Have a question or want to contribute? Join us on Discord!

Contributors

This project exists thanks to all the people who contribute.

Special thanks to @camsong for providing the fastpack name on npmjs.com!

Backers

Thank you to all our backers! 🙏 [Become a backer]

fastpack

Fastpack

Why?

Getting Started

Contributors

Backers

Sponsors

Related posts

fastpack

Fastpack

Why?

Getting Started

Contributors

Backers

Sponsors

Related posts

Malicious PyPI Package Exploits Deezer API for Coordinated Music Piracy

TON Wallet Security Threat: Malicious npm Package Steals Cryptocurrency Wallet Keys