最近公司有个需求，我们部门开发一个平台项目之后，其他兄弟部门开发出的插件我们可以拿来直接用，并且不需要我们再进行打包，只是做静态的文件引入，研究一波后发现，webpack创建library可以实现。
创建library
- 完整代码
- 核心代码为
output: {
path: DIST_PATH,
publicPath: "",
chunkFilename: "[name].js",
filename: "testPlugin.js",
libraryTarget: 'umd',//将你的 library 暴露为所有的模块定义下都可运行的方式
library: 'testPlugin'
},
- 打包出来后我们会得到一个testPlugin.js，这就是我们自己的三方库。
平台项目中使用
- 项目中设置externals，目的是使自己项目不会重复打包引入的库
externals: {
testPlugin:"testPlugin",
},
- 项目引入
<!--index.html-->
<script src="testPlugin.js"></script>
//index.js
import testPlugin from 'testPlugin';
console.log(testPlugin);
- 项目打包好
- 将testPlugin库丢入打包好的dist中
- 会发现平台项目已经成功引入库
- 这样会发现只有打包好dist再丢入库才可以看到效果，平时开发环境下怎么办呢，可以使用
copy-webpack-plugin,及将静态的文件夹自动拷贝到dist
const copyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
new copyWebpackPlugin([{
from:__dirname+'/src/static',//打包的静态资源目录地址
to:'./static' //打包到dist下面的static
}]),
...
]
- 然后只需要改改index.html的引入地址
<script src="static/plugin/testPlugin/testPlugin.js"></script>
发布npm包
上面的方法的优点是：如果兄弟部门的三方库变了，只需要他们把打包好的库文件给我们，我们丢进去替换掉以前的就可以了，我们自己并不需要重新打包。
那发布npm包呢？自己没事又摸索了一波，并成功发布了一个可以对文本插入表情的react小插件。
------传送门------
发布准备
- 自己的项目
- 去npm官网,注册账号。
- 给自己的npm包想个名字，并通过搜索验证是否没有被占用
改写项目webpack配置
- 核心，同上面的创建library一样
- 生产环境配置webpack.config.prod.js
//webpack.config.prod.js
entry: {
component: ['./src/component/Expression/Expression.js']
},
output: {
path: DIST_PATH,
filename: '[name].js',
publicPath: "/dist/",
libraryTarget: 'umd',
library: 'expression'
},
externals: {
'react': 'react',//因为引入的肯定是react项目，所以不需要再将react打包进npm包
'react-dom': 'react-dom'
},
- 开发环境配置webpack.config.dev.js
//webpack.config.dev.js
entry: {
app: ['./src/index.js'],
component: ['./src/component/Expression/Expression.js']
},
- 这样设置之后打包出来只有一个component.js,所以需要修改package的main
- 修改package.json
"main": "dist/component.js",
- package的其他设置
- 另外package里面的name就是你包的名字
- version是版本号
- main是入口文件
- description是描述
- repository是线上git地址
- keywords是关键字，比较重要，别人可以通过这个搜索到你的包
- author是作者
做完这些就可以发布了
- npm login
- 会让你输入账号，密码，邮箱，然后就登陆了
- 登录成功会出现以下提示信息：
Logged in as simbawu on https://registry.npmjs.org/.- 注意：如果不是这个，而是我们的其他镜像比如淘宝的，需要先切换回来，否则提交不起
npm config set registry https://registry.npmjs.org/，然后再次npm login。
- 注意：如果不是这个，而是我们的其他镜像比如淘宝的，需要先切换回来，否则提交不起
- npm publish发布
-
若出现包名和版本号则发布成功
1.png
-
自己发布的react小插件
最后
大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：www.yangyuetao.cn
小程序：TaoLand
