preface
A loading style component was made before. In order to realize the reusability of the code, this small project was packaged and published on NPM. In the process of packaging and sending packages, I have experienced one error after another. The component @buzuosheng/loading has reached version 2.7.0. Although there are still some adjustments to be made, it is finally available.
Webpack vs. Rollup
Webpack is one of the most popular packaging tools used by programmers, and rollup gets far fewer questions in interviews than Webpack. One reason for this is the saying “application development uses WebPack, library development uses rollup”.
But both packaging tools have powerful plug-in development capabilities, and the differences are increasingly blurred, but Rollup is simpler to use and produces smaller files. But when we do front-end applications, performance analysis tends to require smaller libraries, so rollup fits better with development libraries.
This is kind of a package experiment, we use both tools to package the project once.
Use WebPack packaging
Before packaging, you need to add or change some fields to the package.json file.
{
// The main entry module of the program, from which the user references the export
"main": "dist/bundle.js".
// The files contained in the project
"files": [
"src".
"dist"
].
// Move react and react-dom to this configuration to make dependencies compatible
"peerDependencies": {
"react": "^ 17.0.1".
"react-dom": "^ 17.0.1"
},
}
Copy the codeWebpack packaging requires many libraries to handle different files. This project is relatively small and only uses two libraries.
// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'production',
entry: './src/Loading.jsx',
output: {
filename: "index.js".
path: path.join(__dirname, "./dist/"),
libraryTarget: 'umd',
},
optimization: {
minimize: false.
},
resolve: {
extensions: ['.jsx']
},
module: {
rules: [
{
test: /\.css$/,
loader: [MiniCssExtractPlugin.loader, 'css-loader?modules'],
},
{
test: /\.(js|jsx)$/,
loader: "babel-loader".
exclude: /node_modules/,
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "main.min.css" // Name of the extracted CSS
})
].
}
Copy the codeInstead of writing the configuration for both the development and production environment, only the configuration for the Production environment is written here.
Package using rollup
There are a few more libraries used in rollup.
// rollup.config.js
// Resolve an issue where rollup cannot recognize CommonJS
import commonjs from 'rollup-plugin-commonjs'
// Babel handles es6 code conversion
import babel from 'rollup-plugin-babel'
// Resolve merges the source code we wrote with dependent third-party libraries
import resolve from 'rollup-plugin-node-resolve'
// postcss processes CSS files
import postcss from 'rollup-plugin-postcss'
export default {
input: "src/Loading.jsx".
// Pack one CJS and one ES file
output: [
{
file: "dist/loading.es.js".
format: "es".
globals: {
react: 'React'.
},
}, {
file: 'dist/loading.cjs'.
format: "cjs".
globals: {
react: 'React'.
},
},
].
external: ['react'].
plugins: [
postcss(
{ extensions: ['.css']}
),
babel({
exclude: "node_modules/**".
runtimeHelpers: true.
}),
commonjs(),
resolve(),
].
}
Copy the codeContract to NPM
Sending packets to NPM takes only a few commands.
npm pack
Copy the codeAfter the project is packaged, the command line outputs the details of the compressed package.
An updated version
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
Copy the codeSelect different commands based on the size of the change.
Finally, use the publish command.
npm publish
Copy the codeYou will then receive an email saying your package has been published successfully.