unpkg +verdaccio+ webpack 联邦实现多版本控制
2021-03-01 14:28
标签：edr style 准备 ted rda opera span export 基于 参考了jherr 的webpack 联邦多版本，基于unpkg 以及verdaccio实现一个私有版本的测试环境 简单说明:dalongrong/unpkg:http-env 是基于官方修改的一个版本，支持http以及基于环境变量配置npm repo，具体可以参考 修改react-unpkg-mf-consumer-starter webpack.config.js 修改（主要是默认unpkg 地址） 说明: 修改webpack 使用不同版本，我们可以看到效果 以上只是一些工具集成的使用，webpack 的ModuleFederationPlugin 是一个很不错的微前端实践方案 https://github.com/mjackson/unpkg unpkg +verdaccio+ webpack 联邦实现多版本控制 标签：edr style 准备 ted rda opera span export 基于 原文地址：https://www.cnblogs.com/rongfengliang/p/14411836.html环境准备
version: "3"
services:
unpkg:
image: dalongrong/unpkg:http-env
environment:
- "NPM_REGISTRY_URL=http://npm-registry:4873"
ports:
- "8080:8080"
npm-registry:
image: verdaccio/verdaccio
ports:
- "4873:4873"
https://github.com/rongfengliang/unpkg使用说明
git clone https://github.com/jherr/unpkg-mf-react-finished
.npmrcregistry=http://localhost:4873
首先构建jherr-mf-slider，然后publish npm私服(参考提示操作)cd jherr-mf-slider
yarn && yarn build && yarn publish
package.json 修改端口 (8080 冲突)"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"build:start": "cd dist && PORT=8090 npx serve",
"start": "webpack serve",
"start:live": "webpack-dev-server --open --mode development --liveReload",
"docker:build": "docker build . -t wp5-starter",
"docker:run": "docker run -p 8090:8090 wp5-starter"
}
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { camelCase } = require("camel-case");
const federatedRemotes = {
"jherr-mf-slider": "1.0.2",
};
const deps = {
...federatedRemotes,
...require("./package.json").dependencies,
};
const unpkgRemote = (name) =>
`${camelCase(name)}@http://localhost:8080/${name}@${
deps[name]
}/dist/browser/remote-entry.js`;
const remotes = Object.keys(federatedRemotes).reduce(
(remotes, lib) => ({
...remotes,
[lib]: unpkgRemote(lib),
}),
{}
);
module.exports = {
output: {
publicPath: "http://localhost:8090/",
},
resolve: {
extensions: [".jsx", ".js", ".json"],
},
devServer: {
port: 8090,
},
module: {
rules: [
{
test: /\.m?js/,
type: "javascript/auto",
resolve: {
fullySpecified: false,
},
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
plugins: [
new ModuleFederationPlugin({
remotes,
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
}),
],
};
cd react-unpkg-mf-consumer-starter
yarn
yarn start
const federatedRemotes = {
"jherr-mf-slider": "1.0.2",
};
说明
参考资料
https://github.com/jdxcode/npm-register
https://github.com/verdaccio/verdaccio
https://github.com/rongfengliang/unpkg
https://github.com/jherr/unpkg-mf-react-finished
https://github.com/rongfengliang/unpkg_verdaccio_webpack_federated
文章标题：unpkg +verdaccio+ webpack 联邦实现多版本控制
文章链接：http://soscw.com/essay/58600.html