V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Terry05
V2EX  ›  分享发现

Vue 插件打包与发布

  •  
  •   Terry05 · 2018-08-16 19:53:43 +08:00 · 1416 次点击
    这是一个创建于 2051 天前的主题,其中的信息可能已经有所发展或是发生改变。

    插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs ),需要对插件进行打包并发布,简单说明一下这个过程,以插件名 dialog 为例

    1. 创建 dialog 目录,并进入

    2. 运行命令行,初始化项目,生成 package.json

    npm init -y
    
    1. 使用 webpack-simple 模板构建项目基本结构(前提为已自行安装好 vue-cli
    vue init webpack-simple
    

    根据导航提示,设置好项目后,基本结构生成完成

    1. 删除无用内容   删除 index.htmlsrc 目录下的所有文件

    2. 复制插件内容到 src 目录中

    3. 修改 package.json 配置内容

    {
      "name": "dialog",
      "description": "the dialog plguin",
      "version": "1.0.0",
      "author": "TerryZ <[email protected]>",
      "license": "MIT",
      //删除原有的"priveate": true,发布到公共库的项目,不能设置该参数
      //增加 main 配置,设置插件在安装后的主入口文件
      "main": "dist/dialog.js",
      "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
      },
      "dependencies": {
        "vue": "^2.5.11"
      },
      //增加插件关键字描述,非必须,按需设置
      "keywords": [
        "front-end",
        "javascript",
        "dialog",
        "vue",
        "vuejs"
      ],
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ],
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "babel-preset-stage-3": "^6.24.1",
        "cross-env": "^5.0.5",
        "css-loader": "^0.28.7",
        "file-loader": "^1.1.4",
        "node-sass": "^4.5.3",
        "sass-loader": "^6.0.6",
        "vue-loader": "^13.0.5",
        "vue-template-compiler": "^2.4.4",
        "webpack": "^3.6.0",
        "webpack-dev-server": "^2.9.1"
      }
    }
    
    1. 修改 webpack.config.jsoutput 部分配置
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        //修改输出打包后的脚本文件名,该文件即是 package.json 中配置的 main 属性的对应文件
        filename: 'dialog.js',
        //增加以下库配置信息
        library: 'Dialog',
        libraryTarget: 'umd',
        umdNamedDefine: true
    }
    
    1. 安装库,国内环境建议使用 cnpm 安装速度会快些
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    1. 编译插件
    npm run build
    
    1. 发布插件,确定你的插件名当前公共库中不存在,否则会发布失败
    npm publish
    

    个人原创内容,转载请说明出处

    完整内容:https://github.com/TerryZ

    1 条回复    2018-08-16 20:07:28 +08:00
    Terry05
        1
    Terry05  
    OP
       2018-08-16 20:07:28 +08:00
    v 站的 md 格式解析列表有问题啊,怎么换了行全都重新计算行号了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3229 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:19 · PVG 22:19 · LAX 07:19 · JFK 10:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.