环境
新建一个组件
1. 创建一个组件文件夹，命名---testButton
//创建testButton目录 用来存放组件
mkdir src
// 创建dist目录 用来存放打包好的文件
mkdir dist
//创建.gitignore 用来添加git忽略的文件
touch .gitignore
// 创建index.html模板
touch index.html
//创建webpack的配置文件
touch webpack.config.js
//进入到testButton目录
cd src
//在src目录中创建 index文件 入口文件
touch index.js
2. 初始化package.json
npm init
得到如图，继续回车，然后在testButton文件下看到package.json
3. 安装相关依赖
//安装babel
npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react
//安装react,react-dom
npm install -D react react-dom --save
//安装loader依赖
npm install -D css-loader style-loader --save
//安装webpack相关依赖
npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin webpack-node-externals
//设置环境变量
npm install -D cross-env
4. 修改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"
},
5. 根目录创建.babelrc文件,支持jsx语法
// .babelrc文件内容如下：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
6.修改index.html模版文件
<!DOCTYPE html>
<html>
<head>
<title>images-viewer-react</title>
<meta charset="utf-8" />
</head>
<body>
<div id="root"></div>
</body>
</html>
7. 配置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 ? 'umd' : undefined, // umd通用node和浏览器环境
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
]
},
devServer: {
contentBase: './dist'
},
externals: isProd ? [nodeExternals()] : [], // nodeExternals 使得打包的组件中不包括任何 node_modules 里面的第三方组件，起到减小体积的作用。
plugins,
};
8. 指向yarn build ,最后目录结构如下
git托管代码
1. 创建git仓库，如图
2. 提交代码到仓库
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
发布
1. 登录npm
npm login
根据提示输入,如图
注意：发布npm包不能使用淘宝镜像，切换为npm镜像
npm config set registry https://registry.npmjs.org/
2. 发布
npm publish
注意：如果发布失败，可能已经存在了，修改package.json换个包名试试。
如图，发布成功
