1. 寫組件
a）先看文件結(jié)構(gòu)
image.png
b）各文件內(nèi)容
1)public下建一個(gè)index.html：
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
</html>
2)src建一個(gè)index.js：寫一個(gè)組件
export default = () =>(
<div>
我是準(zhǔn)備發(fā)布的組件
</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' // 只展示錯(cuò)誤信息餐塘，避免大量無用日志
},
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轉(zhuǎn)成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. 發(fā)布
a) 寫的組件內(nèi)：打包并本地模擬
$ npm run build // 打包
$ npm link // 本地模擬
b) 寫個(gè)引入組件的demo：安裝包是package.json里面的name
npm install @ali/react-comp
import ReactComp from '@ali/react-comp使用
c) 發(fā)布到 TNPM
$ npm i -g tnpm --registry=[https://registry.npm.alibaba-inc.com](https://registry.npm.alibaba-inc.com)
npm run build
tnpm publish
就能在tnpm官網(wǎng)搜到自己的組件了
d)升級(jí)版本號(hào)
major：主版本號(hào)
minor：次版本號(hào)
patch：補(bǔ)丁號(hào)
tnpm version major 就是將1.0.0升級(jí)到2.0.0
tnpm version minor 就是將1.0.0升級(jí)到1.1.0
tnpm version patch 就是將1.0.0升級(jí)到1.0.1
根據(jù)自己需要升級(jí)吧稠集，也可以在package.json改version也可以览露。
例如：
npm run build
tnpm version patch
tnpm publish
哦了！
