webpack创建library及从零开始发布一个npm包

创建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发布
  • 若出现包名和版本号则发布成功
    
    

自己发布的react小插件

------传送门------

最后