webpack.config.js配置
webpack.config.js文件路径
对应的内容如下：
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
// "HY_FormDesign": __dirname + '/src/App.js',
// "HY_ActivitiForm": __dirname + "/src/ActivitiForm.js",
// "HY_RenderForm": __dirname + "/src/RenderForm.js"
"hy-react-form-makings": __dirname + "/src/index.js"
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'commonjs2',
libraryExport: "default",
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['react', 'env',
'stage-1']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)$/i,
use:
{
loader: 'url-loader',
query: {
// inline base64 DataURL for <=2KB images, direct URLs for the rest
limit: 2048,
name: '[name]_[md5:hash:base64:6].[ext]'
}
}
}
]
},
resolve: {
extensions: [".jsx", ".js", ".css"]
},
externals: [nodeExternals()],
plugins: [
new CleanWebpackPlugin(['dist'])
]
};
package.json配置
配置内容如下：
{
"name": "react-form-makings",
"version": "0.0.8",
"private": false, ------发布对应的private要是false才行
"main": "lib/index.js", ----------发布的时候要改，打包的时候是src/index.js
"dependencies": {
"antd": "^3.11.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.9",
"expr-parser": "^1.0.0",
"lodash": "^4.17.11",
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-ace": "^6.3.2",
"react-color": "^2.14.1",
"react-dom": "^16.6.3",
"react-router-dom": "^4.3.1",
"react-script": "^2.0.5",
"react-scripts": "2.1.1",
"sortablejs": "^1.7.0",
"style-loader": "^0.19.1",
"url-loader": "^1.1.2",
"webpack": "^4.0.0",
"webpack-node-externals": "^1.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack --progress",
"watch": "webpack --watch --progress",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepublishOnly": "babel src --out-dir lib",
"compile": "babel src --out-dir lib",
"clean": "rd /s/q lib && mkdir lib",
"lib": "npm run clean && babel src --out-dir lib --copy-files"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-preset-stage-1": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"file-loader": "^3.0.1",
"image-webpack-loader": "^4.6.0",
"webpack-cli": "^3.2.0"
}
}
注意：
- "private": false, ------发布对应的private要是false才行
- "main": "lib/index.js", ----------发布的时候要改，打包的时候是src/index.js
- "lib": "npm run clean && babel src --out-dir lib --copy-files" ----打包的时候执行npm run lib就可以了，其中--copy-files拷贝其他不需要转义的地方（转义类型通过.babelrc文件定义）
.babelrc配置
内容如下:
{
"presets": [
"react",
"env",
"stage-1"
],
"env": {
"start": {
"presets": [
"react-hmre"
]
}
},
"plugins": ['transform-react-jsx']
}
打包发布执行步骤
-
步骤1：执行npm run lib命令（在package.json对应的script），执行完之后会生成如下的内容：
npm run lib执行之后的结果
-
步骤2： 在私仓（使用的是nexus作为私仓）上建立账号，如下图所示：
nexus私仓建账号
-
步骤3： npm Bearer Token Realm授权激活
nexus realm激活
-
步骤4：在项目根目录下面简历.npmrc文件（注册中心配置文件），对应的内容和截图如下：
.npmrc对应的内容
registry=http://192.168.3.244:8081/repository/npm_all/
disturb=http://192.168.3.244:8081/repository/npm_hy/
npm_all对应的配置
可以看到npm_all是npm_center和npm_hy的集合，其中npm_center是代理npm仓库的，对应的截图如下：
npm_center对应的配置
npm_hy对应的配置如下：
npm_hy对应的配置
- 步骤5：在项目的根目录下进行登录，命令如下：
npm login --registry http://192.168.3.244:8081/repository/npm_hy/
npm login登录截图
- 步骤6：发布，命令如下：
yarn publish --registry http://192.168.3.244:8081/repository/npm_hy/
yarn publish发布截图
对应的nexus私仓查看上传结果，对应的截图如下：
npm publish上传之后对应的nexus截图
-
步骤7：使用和其他依赖一样，仅仅在package.json中进行配置，并在项目中配置.npmrc文件（内容和上面一样）即可，如下图所示：
使用配置
- 注意：组件中对应的index.js文件的内容如下：
import ActivitiForm from "./ActivitiForm";
import FormDesign from "./App";
import RenderForm from "./RenderForm";
export {FormDesign,ActivitiForm,RenderForm}
在其他项目中进行引用的时候，使用如下方式：
import React, { Component } from 'react';
import {FormDesign} from "react-form-makings"; // 引用方式
class FormCreate extends Component{
render(){
return (<FormDesign/>); // 使用方式
}
}
export default FormCreate;
组件测试项目
- 步骤1：可以在组件项目文件夹中新建一个目录test，在test中创建一个demo项目，使用如下命令
>create-react-app demo01
//如果找不到命令，则使用如下命令进行安装npm install -g create-react-app
create-react-app命令执行截图
在对应的项目目录中截图如下：
创建一个测试项目对应的目录截图
-
步骤2：修改组件项目对应的package.json中的main为lib/index.js，对应的截图如下所示：
修改组件项目对应的package.json
-
步骤3：在组件项目的根目录下执行命令yarn link，对应的截图如下：
yarn link执行截图
-
步骤4：在测试项目目录下面执行yarn link react-form-makings命令进行组件使用，对应的截图如下所示：
测试项目根目录下面执行yarn link react-form-makings
- 步骤5：在测试项目中使用组件，应用方式如下：
import {FormDesign} from "react-form-makings";
// 在合适的地方使用 <FormDesign />
网友评论