1. 写组件
a）先看文件结构
image.png
b）各文件内容
1)public下建一个index.html：
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
</html>
2)src建一个index.js：写一个组件
export default = () =>(
<div>
我是准备发布的组件
</div>
)
3).babelrc配置
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}
4)package.json配置
{
"name": "@ali/react-comp",
"version": "1.0.1",
"description": "阿里巴巴组件",
"main": "dist/bundle.js",
"files": [
"dist"
],
"publishConfig": {
"registry": "https://registry.npm.alibaba-inc.com"
},
"scripts": {
"start": "webpack-dev-server --config webpack.dev.config.js",
"dev": "webpack-dev-server --config webpack.dev.config.js",
"build": "webpack --config webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"antd": "^3.24.3",
"prop-types": "15.6.0",
"react": "16.7.0",
"react-dom": "16.7.0"
},
"devDependencies": {
"@babel/core": "7.2.2",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "7.2.3",
"@babel/preset-react": "7.0.0",
"babel-loader": "8.0.5",
"babel-plugin-import": "^1.12.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "0.28.9",
"html-webpack-plugin": "3.2.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"style-loader": "0.19.1",
"stylus": "0.54.5",
"stylus-loader": "3.0.2",
"webpack": "4.29.0",
"webpack-cli": "3.2.1",
"webpack-dev-server": "3.1.14",
"webpack-node-externals": "1.6.0"
}
}
5)webpack.dev.config.js配置
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/dev.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
exclude: [/node_modules/],
loaders: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true,
localIdentName: '[name]-[local]-[hash:base64:5]' //修改cssmodule样式名为文件名
// sourceMap: true //css可以在chrome中定位文件路径
}
},
'less-loader'
]
},
{
test: /\.less$/, // 配置除src外的less文件不打开cssModule
exclude: [/src/],
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'less-loader',
options: { javascriptEnabled: true }
}
]
},
{
test: /\.cm\.styl$/,
loader: 'style-loader!css-loader?modules&camelCase&localIdentName=[local]-[hash:base64:5]!stylus-loader'
}
]
},
devServer: {
contentBase: './dist',
historyApiFallback: true, // 支持路由
port: 8080,
stats: 'errors-only' // 只展示错误信息，避免大量无用日志
},
plugins: [
new htmlWebpackPlugin({
template: 'public/index.html'
}),
new webpack.ProvidePlugin({
React: 'react'
})
],
resolve: {
extensions: ['.tsx', '.js', '.jsx', '.css', '.less'],
modules: ['node_modules'],
alias: {
'@': path.resolve(__dirname, './src')
}
},
devtool: 'source-map' //js转成react代码
};
6)webpack.prod.config.js配置
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
library: '@ali/react-comp',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
exclude: [/node_modules/],
loaders: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
modules: true,
localIdentName: '[name]-[local]-[hash:base64:5]' //修改cssmodule样式名为文件名
}
},
'less-loader'
]
},
{
test: /\.less$/, // 配置除src外的less文件不打开cssModule
exclude: [/src/],
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true //css可以在chrome中定位文件路径
}
},
{
loader: 'less-loader',
options: { javascriptEnabled: true }
}
]
},
{
test: /\.cm\.styl$/,
loader: 'style-loader!css-loader?modules&camelCase&localIdentName=[local]-[hash:base64:5]!stylus-loader'
}
]
},
devServer: {
contentBase: './dist'
},
plugins: [new CleanWebpackPlugin()],
resolve: {
extensions: ['.tsx', '.js', '.jsx', '.css', '.less'],
modules: ['node_modules'],
alias: {
'@': path.resolve(__dirname, './src')
}
},
externals: [nodeExternals()]
};
2. 发布
a) 写的组件内：打包并本地模拟
$ npm run build // 打包
$ npm link // 本地模拟
b) 写个引入组件的demo：安装包是package.json里面的name
npm install @ali/react-comp
import ReactComp from '@ali/react-comp使用
c) 发布到 TNPM
$ npm i -g tnpm --registry=[https://registry.npm.alibaba-inc.com](https://registry.npm.alibaba-inc.com)
npm run build
tnpm publish
就能在tnpm官网搜到自己的组件了
d)升级版本号
major：主版本号
minor：次版本号
patch：补丁号
tnpm version major 就是将1.0.0升级到2.0.0
tnpm version minor 就是将1.0.0升级到1.1.0
tnpm version patch 就是将1.0.0升级到1.0.1
根据自己需要升级吧，也可以在package.json改version也可以。
例如：
npm run build
tnpm version patch
tnpm publish
哦了！
