第一步：初始化我們的配置
$ mkdir react-hello-world
$ cd react-hello-world/
$ npm init -y
修改我們的package.json文件
//package.json
{
"name": "react-hello-world",
"version": "1.0.0",
"description": "",
"main": "dist/bundle.js",
"files": [
"dist"
],
"scripts": {
"build": "webpack --env.NODE_ENV=production",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
接下來安裝相關依賴
npm i react react-dom
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-dev-server webpack-cli html-webpack-plugin webpack-node-externals css-loader style-loader
接下來配置 webpack。這里分成兩份配置，一份用於開發環境(development)，一份用於單獨打包組件用於生產環境(production)。
在開發環境下，我們需要搭建一個完整的項目，讓我們可以開發組件，並可以將其引入其他組件，渲染到瀏覽器中看到效果。
同時我們也需要一些開發工具的支持，比如 HMR（hot module reloa） 組件熱更新和詳細的報錯信息。
在生產環境下，只需要打包組件本身，不包括工程里面的其他組件。同時我們需要壓縮文件體積，盡量減小組件打包之后的體積。
Webpack 配置
下面是我們的 webpack 開發配置
//dev.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist'),
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
contentBase: './dist'
},
plugins: [
new htmlWebpackPlugin({
template: 'public/index.html'
})
],
};
//prod.config.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'production',
entry: './src/helloWorld.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist'),
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
externals: [nodeExternals()]
};
//webpack.config.js
module.exports = (env) => {
if (env && env.NODE_ENV === 'production') {
return require('./webpack/prod.config.js');
} else {
return require('./webpack/dev.config.js');
}
}
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
//public/index.html
<!DOCTYPE html>
<html>
<body>
<div id="app" />
</body>
</html>
完成以上配置以后，我們可以在 src 文件夾里面開發自己組件。
src內的內容如下
//app.js
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.render(<HelloWorld/>,document.getElementById('app'));
//helloWorld.css
.hello-world {
font-size: 40px;
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
-webkit-background-clip: text; /*必需加前綴 -webkit- 才支持這個text值 */
-webkit-text-fill-color: transparent; /*text-fill-color會覆蓋color所定義的字體顏色： */
font-weight: bold;
}
//HelloWorld.js
import React,{ Component } from 'react';
import './HelloWorld.css';
class HelloWorld extends Component{
constructor(props){
super(props);
this.state={
value:'HelloWorld'
}
}
render(){
const { value } = this.state;
return(
<div className="hello-world">
{value}
</div>
)
}
}
export default HelloWorld;
//index.js
import HelloWorld from './HelloWorld';
export default HelloWorld;
運行 npm run dev，讓 webpack-dev-server 渲染到瀏覽器中，實時看到效果
打包並驗證
打包組件，只需要運行 npm run build 就可以了。
接下來可以通過 npm link 把打包之后的組件引入到 global node_modules 中，然后在驗證 demo 中再通過 npm link HelloWorld 引入這個組件，並驗證是否符合預期。
接下來 demo 里面就可以直接 “import HelloWorld from ''react-hello-world”
組件發布到npm是：npm publish
我使用npm publish發包發現並沒有發布，這個是要登錄npm.org進行注冊
使用npm publish進行發布
上面是我遇到的一個報錯，說明hello-world組件已經被注冊過了，我得選一個沒有人發布的名字呢
下面是發布成功的標志
可以在npm上面搜到react-hello-dimple
24小時之后才能夠搜到我呢
關於撤銷包和刪除包博客：https://www.cnblogs.com/penghuwan/p/6973702.html#_label3_0
關於發包博客：https://www.jianshu.com/p/db6113c94dbc
關於發包博客：https://blog.csdn.net/qq_24956515/article/details/80514262