There’s just such a Parcel Parcel waiting for you to see it. JavaScript packaging tool, found that it has 3000+ Star on Github but low popularity in the Chinese world, so I found an article on Medium and translated it for everyone to understand.
Bitsrc. IO /build-bette…
Webpack is a build tool that packs all your JavaScript files, images, font libraries, CSS, etc. into a dependency diagram. This allows you to use require() in your source code to reference native files and decide how to handle that native file code in the final JavaScript package.
Poi is a zero configuration WebPack-based packer. Zero configuration doesn’t mean that the project doesn’t need to be configured at all, but the Poi has already configured a lot of things for us.
This article shows you how to build your JavaScript application, package it with Webpack, and configure it with Poi.
Launch a simple JavaScript file using the Poi
Deploying a single JavaScript file using a Poi is very simple. The Poi can start a development server and automatically reload pages when files change.
First, install the Poi on your system.
$ npm i -g poi
Copy the codeThen, create a new project directory.
$ mkdir js-app
$ cd js-app
Copy the codeCreate a new index.js file under this directory:
document.getElementById ('app').innerHTML = ` Hello world!
`;
Copy the codeHere document.getelementById gets a div with id “app” that will be created by the Poi. Inside the div is a simple “Hello World.”
To launch the file in a browser, open the terminal and execute the command POi. The Poi will handle all webPack-related stuff and deploy the file on localhost:4000.
If you place index.js in another folder, such as SRC, then you need to execute the command poi SRC /index.js to launch the file on the development server.
Customize HTML templates using Poi
Although the Poi provides a ready-made HTML template for our application, we can still customize it to our liking. The following shows how to customize the HEAD tag in an HTML page using a Poi.
Create a new file in the project directory called index.ejs with the following code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Running JavaScript Apps with POI</title>
</head>
<body>
<div id="app"></app>
</body>
</html>
Copy the codeExecuting the poi command again will result in a new page with the title updated. If you examine the page with a browser development tool, you can see that the head tag has also been customized, while WebPack still injects all the scripts into the page.
Configure the POI using poi.config.js
The HTML template configuration method above works fine for simple JavaScript pages, but soon you’ll need a way to configure more options. This is where POi.config.js comes in.
Start by creating a new poi.config.js file in the project directory. Exports a configuration object using module.exports:
module.exports = {
html: {
title: 'Running JavaScript Apps with Poi'.description: 'Customize how to render the main template using configuration settings.'.template: './index.ejs'.text: 'Running JavaScript Apps with Poi'.author: ['Rajat'],}};Copy the code· Title and Description are used to define the description of the page title. The template option is used to tell the Poi where to export the customization options.
You’ll use the index.ejs file you created in the previous section. Now modify its contents to contain only one div element:
<div id="app"></div>
Copy the codeWe need to render the Text and author options in the body of the page. Enter the following code in index.ejs:
<% const {text, author} = htmlWebpackPlugin.options %>
<h1>
<%= text%>
</h1>
<ul>
<% _.forEach(author, a => { %>
<li>
<%- a %>
</li>
<% })%>
</ul>
Copy the codeHere we use Underscore and Lodash in the template to get the Text and author options.
We changed the configuration, so we need to re-execute the command poi to see the changes on the page.
Note that this should only be used to configure your project. Things like data should be left to JavaScript.
Build Vue applications using POIS
One of the great advantages of Poi is that we can use it to build Vue applications without having to install Vue as a dependency.
This is because the developer of the Poi is also one of the core developers of the Vue, so the Poi is configured to work with the Vue by default.
Delete all files in the project directory. Create a new index.js file and import the Vue package.
import Vue from 'vue';
import App from './App.vue';
new Vue ({
el: "#app".render: h= > h(App),
});
Copy the codeIn the code snippet above, we import the App component from the app. vue file, then create an instance of vue and mount it on the div element with the id App. The render function will render the code in the app.vue file:
<template>
<h1>{{message}}</h1>
</template>
<script>
export default {
data() {
return {
message: 'Running Vue App with Poi!! '}; }}; </script>Copy the codeRe-execute the poI command and you will see a full Vue application running!
Note: If you get an error message “module not found”, install the Vue dependencies in your project.
Build the React application using the Poi
Building React with a Poi is also very simple. All we need to do is install the React and React-DOM packages and configure Babel to handle the code.
First, install React and react-DOM in your project.
$ yarn add react react-dom
Copy the codeBefore configuring Babel, we need to install some development dependencies.
$ yarn add babel-preset-react-app babel-plugin-react-require -D
Copy the codeThen create a file named.babelrc with the following contents:
{
"presets": ["react-app"]."plugins": ["react-require"]}Copy the codeNow you can write your React app!
Compile the styles in the Poi
Introducing CSS styles into a React application built with a Poi is straightforward. Create a.css file in the project directory and write the import declaration in the.js file.
But if you use.scss files to create styles, you need to install some dependencies.
Open the terminal and install Node-sass and sass-loader using NPM/Yarn:
$ yarn add node-sass sass-loader
// or
$ npm i node-sass sass-loader
Copy the codeAfter installing the React application, re-execute the poi command and you can see that the styles have been loaded into the React application!
Manually add the Webpack Loader
Poi is a real cow. It lets you use a large number of WebPack loaders without any customization or configuration.
Of course, Poi does not cover all WebPack loaders. The following example shows how a markdown file can be loaded as a React component by adding the React-markdown-loader to the Poi. We can use this example to see how to add the Webpack Loader manually.
Create a new file named page.md in your project directory and write anything in markdown format in that file.
To enable the Poi to handle markdown files, we need to add the appropriate loader.
Add the webpack property to poi.config.js as follows:
module.exports = {
webpack(config){
config.module.rules.push({
test: /\.md$/.loaders: [
"babel-loader"."react-markdown-loader"]})return config
}
}
Copy the codeOf course, make sure you have the React-Markdown-loader installed in your project.
After the above processing, introduce the Markdown page in index.js and call it as the React component in the render function.
import {render} from 'react-dom'
import Page from './page.md'
render(<Page />, document.getElementById("app"));
Copy the codeRe-execute the poi command and the markdown file will load normally in the browser.
Build JavaScript packages using Poi
To package a JavaScript project using Poi, simply execute the command Poi build in the terminal to get the dist folder in the project directory.
You can launch the dist folder using the command http-server dist. The change command will start the project on localhost:8080.
To analyze your project, install the development dependency Webpack-bundle-Analyzer first:
yarn add webpack-bundle-analyzer -D
Copy the codeThen add it to poi.config.js as follows:
const BundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
module.exports = options= > ({
webpack (config) {
if(options.analyze){
config.plugins.push(
new BundleAnalyzer()
)
}
config.module.rules.push ({
test: /\.md$/.loaders: ['babel-loader'.'react-markdown-loader']});returnconfig; }})Copy the codeThe options parameter enables the analyze function to be configured with options.analyze. Therefore, the POI will execute the BundleAnalyzer plug-in only if the command POi build –analyze is executed.
Use Poi Presets to skip configuration
As mentioned earlier, the Poi comes with a built-in Vue default configuration. In addition, the Poi provides other preset configurations to install popular libraries such as Elm, React, Storybook, TypeScript, etc.
Run the following command in a terminal to install NIP-preset in the project:
$ yarn add @poi/plugin-<libary-name> --dev
Copy the codeSo if you want to install Elm in your project, the command to type is yarn add @poi/plugin-elm –dev.
To use the plug-in, you need to write the following code in poi.config.js:
module.exports = {
plugins: [
require('@poi/plugin-elm')(options)
]
}
Copy the codeTo learn how to use other PoI-Presets, check out github.com/egoist/poi/… Can.
conclusion
Webpack can be a great help if you are building an application that has many static resources that are not code classes.
On the other hand, other packaging tools such as Grunt and Gulp do not have the concept of dependency diagrams.
Webpack has so many advantages that it can be a great choice for your project. It is also widely used in the React community.
The Poi gives us a “free configuration” way to launch JavaScript projects, which is just the icing on the cake!
This article was first published on my blog (click here to view it).