Initialize the pacage. Json

1.yarn init

Initialize a pakage.json file that contains some basic information

2. Install dependency packages

See pakage.json for details

Pakage. Json file
{" name ":" file - preview ", "version" : "2.0.2", "main" : ". / lib/bundle. Js ", "license" : "MIT", "author" : "huqingqing <[email protected]>", "description": "preview", "keywords": [ "preview", "react" ], "scripts": { "build": "yarn run rollup -c", "start": "yarn run rollup -c -w" }, "dependencies": { "@babel/core": "^ 7.11.6 @", "Babel/preset - env" : "^ 7.11.5", "@ Babel/preset - react" : "^ 7.10.4", "@ rollup/plugin - image" : "^ at 2.0.5", "antd" : "^ 4.6.3 axios", ""," ^ 0.20.0 ", "Babel - plugin - import" : "^ 1.13.0", "classnames" : "^ 2.2.6", "cssnano" : "^ 4.1.10 file -", "loader" : "^ 6.1.0", "less" : "^ 3.12.2", "less - loader" : "^ 7.0.1", "player - HLS - FLV" : "^ 1.0.0 postcss - cssnext" ", ":" ^ 3.1.0 ", "postcss - nested" : "^ 2", "a rollup" : "^ 2.26.11", "a rollup - plugin - Babel" : "^ 4.4.0 rollup", "- the plugin - commonjs" : "^ 10.1.0", "a rollup - plugin - json" : "^ 4.0.0", "a rollup - plugin - postcss" : "^ 3.1.0 rollup", "- the plugin - replace" : "^ 2.2.0", "a rollup - plugin - uglify" : "^ 6.0.4", "url - loader" : "^ 4.1.0", "video. Js" : "^ 7.8.4"}, "devDependencies" : {" customize - cra ":" ^ 1.0.0 ", "postcss - preset - env" : "^ 6.7.0 rollup", "- the plugin - node - resolve", "^ 5.2.0"}}Copy the code
3. In basic configuration, create rollup.config.js
import postcss from "rollup-plugin-postcss"; Import Babel from 'rollup-plugin-babel' // import resolve from 'rollup-plugin-node-resolve' // import Babel from 'rollup-plugin-babel' // Import replace from 'rollup-plugin-replace' import replace from 'rollup-plugin-replace' import replace from 'rollup-plugin-replace' import replace from 'rollup-plugin-replace' import replace from 'rollup-plugin-replace' import replace from 'rollup-plugin-replace' import replace from 'rollup-plugin-replace' import replace from 'rollup-plugin-replace' import replace from 'rollup-plugin-replace' import replace Import uglify from 'rollup-plugin-uglify' import uglify from 'rollup-plugin-uglify' import uglify from 'rollup-plugin-uglify' import uglify from 'rollup-plugin-uglify' import uglify from 'rollup-plugin-uglify' import uglify from 'rollup-plugin-uglify' import uglify from 'rollup-plugin-uglify  import nested from "postcss-nested"; Less import cssNext from "postcss-cssNext "; import cssnano from "cssnano"; import json from "rollup-plugin-json"; import image from '@rollup/plugin-image'; const env = process.env.NODE_ENV const config = { input: './src/index.js', external: Output: {file: "./lib/bundle.js", format: 'CJS ', // output format sourcemap: True, exports: "named"}, plugins: [image(), replace({' process.env.node_env ': JSON.stringify(env) }), postcss({ use: [ ['less', { javascriptEnabled: true, modifyVars: {// configure the antD theme color" primary-color": "#52C9A0", // the main color" border-radius-base": "4px", "success-color": "#F5222D", "body-background", "body-background", "body-background", "#FAFAFA", // page color // link coloe "link-color": "#52C9A0", // link color" link-color": "#5DDEB1", // link to hover color" link-active-color": "#52C9A0", // link to active color}}]], [ nested(), cssnext({ warnForDuplicates: false }), cssnano() ], extensions: [".css",'.less',], extract: // Babel ({exclude: '**/node_modules/**', runtimeHelpers: }), resolve(), resolve(), // There are some apis that use a library but do not export the API to manually export commonjs via namedExports. 'node_modules/**', namedExports: { 'node_modules/react-is/index.js': ['isFragment','isMemo'], 'node_modules/react-dom/index.js': ['findDOMNode'] } } ), json(), ]} if (env === 'production') {config.plugins.push(uglify({// compress bundle.js file compress: {pure_getters: true, unsafe: true, unsafe_comps: true, warnings: false } }) ) } export default configCopy the code
Create a.babelrc file

Create a.gitignore file

Create a SRC folder in the root directory and create an entry file

Packaging project

Run the yarn build command

Release NPM package

If you have registered with NPM, publish directly. If you have not registered with NPM, run NPM adduser to complete the content.Then perform NPM publishNote: name is not the same as other project names on NPM!!

Check out your own packages on the NPM website

The NPM package has been registered on the NPM website and is now available for use in other projects