
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Pack JS code into a single bundle fast & easy.
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 |
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!
This project exists thanks to all the people who contribute.
Special thanks to @camsong for providing the fastpack name on npmjs.com!
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
FAQs
Pack JS code fast & easy.
The npm package fastpack receives a total of 17 weekly downloads. As such, fastpack popularity was classified as not popular.
We found that fastpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.