1. 创立我的项目
mkdir component-template && cd component-templatenpm initnpm init会弹出项目名称、版本、形容等信息，依照本人须要填写即可。
执行完以上 shell 命令后会生成一个含有package.json的空我的项目, 咱们批改文件目录如下：
component-template├─ config│ ├─ webpack.config.base.js│ ├─ webpack.config.dev.js│ └─ webpack.config.prod.js├─ demo // 测试组件用│ ├─ index.html│ └─ index.js├─ src // 源代码目录│ ├─ index.js│ └─ index.less├─ babel.config.json└─ package.json2. 装置依赖
- 装置 React 相干依赖
npm i react react-dom --save-dev- 装置 webpack 相干依赖
npm i webpack webpack-cli webpack-dev-server webpack-merge clean-webpack-plugin --save-dev其中，clean-webpack-plugin 是为了每次打包革除掉前一次的内容。
- 装置 babel 相干依赖
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react --save-dev- 装置 babel-loader
npm i babel-loader --save-dev- 装置款式相干 loader(这里应用 less 来开发组件)
npm i style-loader css-loader less less-loader --save-dev3. 配置 webpack
- 配置
webpack.config.base.js作为公共配置
const path = require('path');module.exports = { module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.css$/, exclude: /node_modules/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } } ] }, { test: /\.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } }, 'less-loader' ] }, { test: /\.(jpg|jpeg|png|gif|svg)$/, type: 'asset', parser: { // 转base64条件 dataUrlCondition: { maxSize: 8 * 1024 } }, generator: { filename: 'img/[name].[hash:6][ext]' } } ] }, // 配置下别名和扩展名优先级, 为了引入时书写不便 resolve: { alias: { '@': path.resolve(__dirname, '../src/') }, extensions: ['.js', '.jsx', '.json'] }};- 配置
webpack.config.dev.js作为开发配置
const path = require('path');const { merge } = require('webpack-merge');const baseConfig = require('./webpack.config.base.js');const devConfig = { mode: 'development', entry: path.join(__dirname, '../demo/index.js'), output: { path: path.join(__dirname, '../demo/'), filename: 'bundle.js' }, devServer: { static: path.join(__dirname, '../demo/'), compress: true, host: '127.0.0.1', port: 8899, open: true }};module.exports = merge(devConfig, baseConfig);须要留神的是, 开发配置是为了实时预览成果，入口是 demo/index.js。打包产生的 bundle.js 在内存中，不会在 demo 文件夹理论生成。
- 配置
webpack.config.prod.js作为打包配置：
const path = require('path');const { merge } = require('webpack-merge');const { CleanWebpackPlugin } = require('clean-webpack-plugin');const baseConfig = require('./webpack.config.base.js'); // 援用公共的配置const prodConfig = { mode: 'production', entry: path.join(__dirname, '../src/index.js'), output: { path: path.join(__dirname, '../lib/'), filename: 'index.js', libraryTarget: 'umd', libraryExport: 'default' }, plugins: [new CleanWebpackPlugin()], optimization: { minimize: true }, externals: { // 内部依赖 react: { root: 'React', commonjs2: 'react', commonjs: 'react', amd: 'react' }, 'react-dom': { root: 'ReactDOM', commonjs2: 'react-dom', commonjs: 'react-dom', amd: 'react-dom' } }};module.exports = merge(prodConfig, baseConfig);4. 配置 babel
在babel.config.js中配置：
module.exports = { presets: ['@babel/preset-env', '@babel/preset-react']};至此，所有配置已实现。接下来咱们开发组件。
5. 开发组件
咱们写一个简略的组件。一个宽高各 200px 的盒子，文本程度、垂直居中。
// src/index.js:import React from 'react';import styles from './index.less';const Test = (props) => { const { text = '测试' } = props; return ( <> <div className={styles.box}>{text}</div> </> );};export default Test;// src/index.less.box { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; font-size: 16px; color: #fff; background-color: #ff0000;}6. 测试成果
在demo/index.html增加如下代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="root"></div> <script src="./bundle.js"></script></body></html>在demo/index.js 增加以下代码：
import React from 'react';import { render } from 'react-dom';import Test from '../src';const App = () => ( <div style={{ width: '100vw', height: '100vh' }}> <Test text='哈哈' /> </div>);render(<App />, document.getElementById('root'));批改package.json里的运行脚本，如下：
... "scripts": { "start": "webpack-dev-server --config config/webpack.config.dev.js", "build": "webpack --config config/webpack.config.prod.js", "pub": "npm run build && npm publish" }, ...npm run start看一下组件成果。确认没问题，那咱们就npm run build打包。
7. 公布
依据本人须要，书写应用文档 README.md, 增加一下.npmignore，如下：
node_modules/src/demo/config/babel.config.json.gitignorenpm login登录本人的账号
在我的项目根目录，npm publish即可公布本人的 npm 包。
到 npm 平台上关上本人的账户，就能够查看本人的 npm 包了。
本文由mdnice多平台公布