一、React打包发布
在开始React应用的打包之前，首先需要确保我们已经安装了Node.js和相关的npm依赖包。
接下来就可以使用create-react-app脚手架构建我们的React应用。
npx create-react-app my-app
创建完毕后，我们可以通过下面的命令来启动本地服务。
cd my-app
npm start
如果我们需要将React应用发布到线上环境，则需要使用打包命令进行打包。
npm run build
这个命令将会在我们项目的根目录中生成一个build目录，并将我们的React应用打包成HTML、CSS、JavaScript文件。
二、React打包部署到服务器
针对打包完成的React应用，我们需要将它部署到服务器上。
我们可以使用nginx等服务器软件进行部署，其中可以利用nginx的location规则进行React路由的配置。具体步骤如下：
1、安装nginx
sudo apt-get install nginx
2、配置nginx
sudo vim /etc/nginx/nginx.conf
http {
server {
listen 80 default_server;
server_name example.com;
root /var/www/example.com;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
}
3、将build目录的内容放到服务器的指定目录下
sudo mkdir /var/www/example.com
sudo cp -r build/* /var/www/example.com/
部署完成后，访问服务器地址即可访问React应用。
三、React打包成App
使用React Native框架可以将我们的React应用打包成原生App，通常一份代码可以同时构建iOS和Android两个平台的App。
我们可以使用以下命令安装React Native。
npm install -g react-native-cli
接下来，创建一个React Native项目
npx react-native init my-app
打包iOS应用
cd my-app
react-native run-ios
打包Android应用
cd my-app
react-native run-android
四、React打包小程序
通过使用Taro等React小程序框架，我们可以将React应用打包成小程序，发到微信小程序平台上。
以下是打包小程序的步骤。
1、安装Taro
npm install -g @tarojs/cli
2、创建Taro项目
taro init myApp
3、配置小程序appId
在app.config.js中配置小程序appId，以便后续打包小程序使用。
const config = {
appId: 'YOUR_APPID',
...
}
4、打包小程序
taro build --type weapp --watch
五、React打包工具
目前比较常用的React打包工具有Webpack、Rollup、Parcel等。
Webpack作为一个功能齐全的工具，广泛应用于大规模应用的打包项目中。Rollup则更适合用来打包JavaScript库。Parcel则是一款零配置打包工具，适合用来快速打包小型项目。
六、React打包单个组件
在React应用中，我们通常使用npm包管理方式来管理组件库。对于针对单个组件进行打包的场景，我们可以使用rollup打包工具，对组件库进行打包。
以下是单个组件打包的步骤。
1、安装Autoprefixer和PostCSS-CLI插件
npm install -g autoprefixer postcss-cli
2、安装rollup和rollup打包插件
npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-postcss rollup-plugin-babel rollup-plugin-uglify
3、创建rollup.config.js
import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/index.js',
output: {
file: 'dist/lib.js',
format: 'umd',
},
plugins: [
babel({
exclude: "node_modules/**"
}),
uglify(),
resolve(),
commonjs(),
postcss({
plugins: [
require('autoprefixer')
]
})
]
}
4、创建打包命令
在package.json文件中添加打包命令。
"scripts": {
"build": "rollup -c rollup.config.js"
}
七、React打包优化
针对React应用打包优化，有以下几个方面可以进行优化。
1、缩小打包体积
在我们打包完React应用的时候，首先需要关注的是整个应用的体积，我们可以使用webpack-bundle-analyzer工具分析我们打包后的应用各模块所占空间的大小，从而进行相应的优化。
2、懒加载
对于大的单页面应用，我们可以利用React的异步加载机制来实现懒加载，从而减小初始加载时的体积。
3、CDN加速
通过使用CDN加速，可以减小服务器的负担，加快应用的加载速度。
八、React打包代码加密
为了防范代码被不法分子篡改或盗用，我们可以对代码进行加密。
在打包构建React应用时，可以使用JavaScript代码混淆工具对代码进行加密。
目前常用的代码混淆工具有UglifyJS、Terser、Babel-Minify等。
以下是UglifyJS的使用示例。
1、安装UglifyJS
npm install -g uglify-js
2、在webpack配置中添加UglifyJS插件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
plugins: [
new UglifyJSPlugin()
]
};
