NPM使用nexus3 發佈封裝組件

時間 2019-11-16

原文原文鏈接

Nexus 3信息
私有庫：http://**:8081/repository/cc-npm-hosted/
代理庫：http://**:8081/repository/cc-npm-proxy/
倉庫組：http://**:8081/repository/cc-npm-group/css

認證信息：cc_npm_publicer/cc_npm_publicerhtml

NPM處理過程：vue

建立目錄(目錄名稱建議與包名相同)，而後建立package.json文件node

package.json中的name以及version更改成對應名稱及版本webpack

webpack.config.js中配置git

const NODE_ENV = process.env.NODE_ENV;
console.log("-----NODE_ENV===", NODE_ENV);
// "main": 'dist/sumFunction.js',
module.exports = {
entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/infoConfig/index.js', //index中引入頁面和vuex組件
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'index.js',
library: 'deviceTrend', // 指定的就是你使用require時的模塊名
libraryTarget: 'umd',
umdNamedDefine: true
}github

配置好json後將所需資源文件加入到目錄，而後執行命令進行發佈：web

登陸：npm login --registry=http://192.168.138.182:8081/repository/cc-npm-hosted/
發佈：npm publish --registry=http://192.168.138.182:8081/repository/cc-npm-hosted/vue-router

使用：vuex

須要配置registry 或安裝時制定庫
npm install [package-name] --registry=http://192.168.138.182:8081/repository/cc-npm-group/

或

npm config set registry http://192.168.138.182:8081/repository/cc-npm-group/

或

編輯 ~/.npmrc 加入下面內容，registry = http://192.168.138.182:8081/repository/cc-npm-group/

項目引入：

main.js中寫入

import TrendChart from 'device-trend'
Vue.component('trend-chart', TrendChart.devicetrend)
store.js中寫入

import DeviceTrend from 'device-trend'

const device = DeviceTrend.device_trend

本文參考 https://www.cnblogs.com/max-t...

項目初始化:

1.1 之前咱們初始化vue工程都是用 webpack 的完整配置模板，也就是：

    vue init webpack my-project

1.2 若組件至關複雜，並且須要打包到一個vue組件中建議使用 Vue CLI 3

      使用Vue CLI 3將基於element-ui二次封裝的組件發佈到npm

npm uninstall -g vue-cli

cnpm install -g @vue/cli

vue create my-app

cd my-app

vue add element

參考網址： https://www.cnblogs.com/lalalagq/p/9921283.html

     vue-cli-plugin-element   https://github.com/ElementUI/vue-cli-plugin-element



     1.3 咱們要寫的是一個簡單的vue組件，不須要依賴那麼多而龐大的配置，因此，這裏咱們用簡介版本的webapck配置模板,即：

   vue init webpack-simple my-project

    三者的差別： https://segmentfault.com/a/1190000011402931


   1.4 初始化完成後

   1.5 既然是封裝組件，那咱們在 src 下面建立一個 myPlugin 文件夾規整一點吧，
         而後，考慮到要寫不少種狀況,咱們在 myPlugin 下面放咱們的插件（若是我的習慣不想區分也行，只是方便管理），
         當前組件的相關文件咱們給一個 infoConfig 文件夾名字，下面建立 common-config.vue 和 index.js

  1.6 接下來，打開終端，安裝依賴，啓動項目
   npm install
   npm run dev
   而後，咱們來寫 common-config.vue ，天然是咱們的組件代碼：

  1.7 寫好了組件，咱們本地看下效果先：
      （1）打開 src/App.vue 文件，進行簡單的編輯配置；
      （2）執行 npm run dev  查看頁面效果。

  1.8 繼續咱們 infoConfig/index.js 文件，目的：將該組件做爲 Vue 插件
        此處須要注意的是 install。
        Vue的插件必須提供一個公開方法 install，該方法會在你使用該插件，也就是  Vue.use(yourPlugin) 時被調用。
        這樣也就給 Vue全局注入了你的全部的組件。
        參考  https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6

修改配置項：　
```
2.1 修改 webpack.config.js   :
```

entry: NODE_ENV == 'development' ? "./src/main.js" : "./src/myPlugin/infoConfig/index.js",

// 根據不一樣的執行環境配置不一樣的入口

output: {

path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/', 
  filename: 'index.js', 
  library: 'systemInfoConfig', 
     // 指定的就是你使用require時的模塊名
  libraryTarget: 'umd', 
     // 指定輸出格式
    // 爲了支持多種使用場景，咱們須要選擇合適的打包格式。 
     // 常見的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環境執行， 
     // AMD 只能在瀏覽器端執行，UMD 同時支持兩種執行環境。 
     // 顯而易見，咱們應該選擇 UMD 格式 
  umdNamedDefine: true 
     // 會對 UMD 的構建過程當中的 AMD 模塊進行命名。不然就使用匿名的 define

}

修改完成後執行

npm run build

2.2 修改 package.json  文件：
   每次上到npm上須要更改版本號，package.json 裏的 version 字段
  // 發佈開源所以須要將這個字段改成 false

"private": false,

// 這個指 import tlp_plugin_sum 的時候它會去檢索的路徑

"main": "dist/index.js",

2.3 修改git上傳代碼，能夠將 .gitignore  去掉忽略 dist , 把打包的文件也提交上去；

  2.4  添加版權聲明的插件 
  參考：  https://webpack.js.org/plugins/banner-plugin/
               https://segmentfault.com/a/1190000016949216?utm_source=tag-newest
  要使用某個插件，咱們須要經過npm安裝它，而後要作的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例（plugins是一個數組）

const webpack = require('webpack');
module.exports = {
...

module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                }, {
                    loader: "postcss-loader"
                }
            ]
        }
    ]
},
plugins: [
    new webpack.BannerPlugin('版權全部，翻版必究')
],

};

提交發布：

3.1   .npmignore
   但是若是你在項目中添加了 .npmignore 文件，.npmignore 中的規則就會被忽略，能夠屏蔽不想上傳的源碼文件。
   使用語法與 .gitignore 相似。

3.2 登陸

npm login --registry=http://192.168.138.182:8081/repository/cc-npm-hosted/

3.3 輸入 帳號 密碼 郵箱

Username: cc_npm_publicer
Password: cc_npm_publicer
Email: guowei.cao@bangcle.com

3.4 發佈

npm publish --registry=http://192.168.138.182:8081/repository/cc-npm-hosted/

3.5 發佈成功 ********** 顯示 相似於 + gulp1@1.1.1 就成功了 ********

 3.6 查看 可在   http://192.168.138.182:8081/#browse/browse:cc-npm-hosted:vue-tree%2Fvue-tree-1.0.1.tgz   查看結果

帳號: admin
密碼： admin12345

更改迭代組件：

4.1 修改 package.json version
    4.2 刪除 dist 文件夾
    4.3 npm run build 從新打包
    4.4 再次重複步驟 3

下載安裝，應用：
```
5.1 下載
```

npm install system-info-config --registry=http://192.168.138.182:8081/repository/cc-npm-hosted/

5.2 輸入命令
   npm install system-info-config --registry=http://192.168.138.182:8081/repository/cc-npm-group/ --save

   5.3 依賴包同步到公司私服
   npm install --registry=http://192.168.138.182:8081/repository/cc-npm-proxy/

   5.4 應用
  main.js 中寫入

import BangcleComponent from 'system-info-config'
Object.keys(BangcleComponent).forEach(key => {
Vue.component(BangcleComponent[key].name, BangcleComponent[key]);
});
<systemInfoConfig></systemInfoConfig>

system-info-config 主要完成的是一個公共的 vueX 文件：
   該文件的編寫過程當中 與 項目中的模塊化vuex無異；
   在項目中的使用方式是：
  store.js 中寫入

import BangcleComponent from 'system-info-config' // 按需引入相應的模塊化vueX
const SYSTEM_INFO_STORE = BangcleComponent.SYSTEM_INFO_STORE

if (module.hot) {
    // 使 action 和 mutation 成爲可熱重載模塊
   module.hot.accept(['system-info-config'], () => {
     // 獲取更新後的模塊
     // 由於 babel 6 的模塊編譯格式問題，這裏須要加上 `.default`
     const newMutations = require('system-info-config').default
          // 加載新模塊
          store.hotUpdate({
              SYSTEM_INFO_STORE: newMutations.SYSTEM_INFO_STORE,
          })
   })

}

模塊熱替換  https://webpack.docschina.org/api/hot-module-replacement
     這樣就完成了公共組件的vueX模塊化引入
     在須要使用的組件 dispatch 相應的方法便可，例如：

this.$store.dispatch('SYSTEM_INFO_STORE/UPDATE_SYSTEM_DEFAULT_INFO', this.updatedInfo);
this.$store.dispatch('SYSTEM_INFO_STORE/FETCH_SYSTEM_INFO');

一樣咱們能夠把 system-info-config 作成一個組件，相似於 componments 中的業務組件同樣：
      配置相應的 props 以及 default 值， watch 監聽數據的變化，渲染相應的數據，在此再也不贅述
      可參考 
      http://192.168.138.251/pg/bangcle_components/commit/1536ded6356999f0437ea3ba56c320e394c2ddf2#3f8dd5beab70eee423b1ddbe10ea26a683fe7715

entry: NODE_ENV == 'development' ? "./src/main.js" : "./src/myPlugin/infoConfig/index.js",
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'index.js',
library: 'systemInfoConfig', // 指定的就是你使用require時的模塊名
libraryTarget: 'umd', // 指定輸出格式
// 爲了支持多種使用場景，咱們須要選擇合適的打包格式。
// 常見的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環境執行，
// AMD 只能在瀏覽器端執行，UMD 同時支持兩種執行環境。
// 顯而易見，咱們應該選擇 UMD 格式
umdNamedDefine: true // 會對 UMD 的構建過程當中的 AMD 模塊進行命名。不然就使用匿名的 define
},

用戶管理公共組件

核心概念是把用戶管理的四個頁面看成路由直接拋出來，在父組件接收，並addRoute添加到項目工程中。

經過 VUEX 來動態改變咱們要調整的細節。

代碼以下：

公共組件，配置路由的時候，強烈建議使用import ,這樣打包好的 dist 目錄中，只有一個 js 文件（使用require，就會按需加載了，在父組件一直報錯）。

import VueRouter from 'vue-router'import BangcleComponent from 'User-management-common-module'const customerRoute = BangcleComponent.customerRouteconst App = resolve => require(['../App.vue'], resolve)const appManage = {path: '/',component: App,redirect: '/manage/customer/customer',children: [managePlatform,customerRoute]}const routers = [{path: "/tologin",component(resolve) {require.ensure(['views/login.vue'], () => {resolve(require('views/login.vue'))})}}, ]let unfound = {path: '*',component(resolve) {require.ensure(['components/nofound.vue'], () => {resolve(require('components/nofound.vue'))})}};// 採用push,否則子組件的路由信息，都是404了routers.push(unfound);const router = new VueRouter({mode: 'history',routes: routers})// 動態加載路由router.addRoutes([appManage]);export default router