webpack創建library及從零開始發佈一個npm包

最近公司有個需求，我們部門開發一個平臺項目之後，其他兄弟部門開發出的插件我們可以拿來直接用，並且不需要我們再進行打包，只是做靜態的文件引入，研究一波後發現，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發佈
  • 若出現包名和版本號則發佈成功
    

自己發佈的react小插件

------傳送門------

最後

大家好，這裡是「 TaoLand 」，這個博客主要用於記錄一個菜鳥程式猿的Growth之路。這也是自己第一次做博客，希望和大家多多交流，一起成長！文章將會在下列地址同步更新……
個人博客：www.yangyuetao.cn
小程式：TaoLand