Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
fastpack
Advanced tools
Readme
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 11 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.