The environment

  • The node environment
  • github
  • NPM registers an account
  • The demo address

We are front-end development, development environment does not do too much explanation, their own click on the link to see.

Create a new component

1. Create a component folder named testButton

Gitignore is used to add a file that git ignores: touch.gitignore // HTML // Create webpack configuration file touch webpack.config.js // Go to testButton directory CD SRC // create index in SRC directory Entry file touch index.jsCopy the code

Initialize package.json

npm init
Copy the code

To get the image, press Enter and see package.json in the testButton file

3. Install dependencies

// Install Babel NPM install -d Babel -loader @babel/ core@babel /preset-env @babel/preset-react // install react, preset- dom NPM install -d react react-dom --save // Install loader dependency NPM install -d css-loader style-loader --save // Install Webpack-related dependency NPM install -d Webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin webpack-node-externals // Set the environment variable NPM install -D cross-envCopy the code

4. Modify the package. Json

"main": "dist/index.js",
"scripts": {
  "test": "jest",
  "start": "cross-env NODE_ENV=development webpack-dev-server --open",
  "build": "cross-env NODE_ENV=production webpack"
},
Copy the code

5. Create a. Babelrc file in the root directory, which supports JSX syntax

{"presets": ["@babel/preset-env", "@babel/preset-react"]}Copy the code

6. Modify the index. HTML template file

<! DOCTYPE html> <html> <head> <title>images-viewer-react</title> <meta charset="utf-8" /> </head> <body> <div id="root"></div> </body> </html>Copy the code

7. Configuration webpack. Config. Js

const path = require('path'); const NODE_ENV = process.env.NODE_ENV; Const isProd = NODE_ENV === 'production'; const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); Const nodeExternals = require('webpack-node-externals'); const plugins = isProd ? [new CleanWebpackPlugin()] : [ // new CleanWebpackPlugin(), new HtmlWebpackPlugin({ filename: 'index.html', template: './demo/index.html' }), ] module.exports = { mode: isProd ? 'production' : 'development', entry: isProd ? './index.js' : './demo/index.js', output: { filename: 'index.js', path: path.resolve(__dirname, './dist'), libraryTarget: isProd ? }, module: {rules: [{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, ] }, devServer: { contentBase: './dist' }, externals: isProd ? [nodeExternals()] : [], // nodeExternals reduces the size of the packaged component by excluding any third-party components in node_modules. plugins, };Copy the code

8. Point to YARN Build. The directory structure is as follows

Git managed code

1. Create a Git repository, as shown in the figure

2. Submit the code to the repository

echo "# test-button" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/candy-girl/test-button.git
git push -u origin main
Copy the code

release

1. Login NPM

npm login
Copy the code

Enter as prompted, as shownNote: NPM package release cannot use Taobao image, switch to NPM image

npm config set registry https://registry.npmjs.org/
Copy the code

Release 2.

npm publish
Copy the code

Note: If the release fails, it may already exist, modify package.json and try changing the package name. As shown, the release is successful