编写webpack插件,上传私服npm

  之前项目中国际化语言由前端研发写在本地文件,运用iview插件实现国际化语言。参考这篇文章iview实现国际化。现在要求将这些国际文案通过接口获取,并在打包时生成所有语言本地文件。因此采用webpack和node来创建生成本地文件。

  一、创建插件项目和插件文件i18n.js

const path = require('path')
const fs = require("fs");

const axios = require("axios")

// 参考文档:https://www.webpackjs.com/contribute/writing-a-plugin/
function CreateI18nPlugin(options) {
  // 使用options 设置插件实例参数
  this.options = options
}

CreateI18nPlugin.prototype.apply = function(compiler) {

  let systemName = this.options.systemName
  let env = this.options.env
  // 即将准备生成文件钩子事件
  compiler.plugin("emit", function(compilation, callback) { 
    axios({
      baseURL: 'baseUrl',
      method: "post",
      url: "url",
      data: {}
    })   
    .then(function(resp) {
      
      if(resp.status === 200) {
        // 国际文案,根据后台返回的数据进行处理
        let langAllData = resp.data.data

        // 生成文件
          compilation.assets['enUS.json'] = {
            source: function() {
              return JSON.stringify(langAllData)
            },
            size: function() {
             return Object.keys(langAllData).length
            }
          }
          // json换行美化
          let str = JSON.stringify(langAllData, null, "\t")
          const tmpFile = path.join('src/lang/enUS.json');
          // 创建本地文件
          fs.writeFileSync(tmpFile, str,  function(err) {
            if (err) {
              return console.error(err)
            }
          })
        callback()
      } else {
        callback(new Error('[i18n-plugin] Unable to load the i18n file'))
      }
    }).catch(function(err) {
      callback(new Error(err))
    })
  })
}
// 导出插件
module.exports = CreateI18nPlugin

  二、package.json文件配置,发布

1) package.json配置说明

name:"i18n-plugin" 组件库名称,在npm组件中确保名称唯一,否则不能注册成功

version:"1.0.1"  版本

description:"i18n"  组件库描述

main: "./src/index.js"  入口文件,编译后的包文件

keyword:"i18n"  关键字 用户可以根据关键字搜索出组件库

private: false  是否私有,为false才能发布到npm

license:"MIT"  开源协议,可以为MIT

"publishConfig": {

    "registry": "http://*****/repository/npm-hosted/"  // 私服地址

  }

2)npm切换到私服源

npm config set registry http://*****/repository/npm-hosted/

3)登录私服

npm login --registry=http://*****/repository/npm-hosted/

4) 发布到私服

因为在package.json文件已经配置publishConfig,直接npm publish即可。若没有配置publishConfig,则发布命令为

npm publish --registry=http://*****/repository/npm-hosted/

 三、下载私服插件

npm install [email protected] --registry=http://*****/repository/npm-hosted/

 

你可能感兴趣的:(webpack)