vue制作npm插件并上传

anjushi_

已于 2022-09-09 11:06:55 修改

阅读量921

点赞数

分类专栏：前端 # vue 文章标签： vue.js npm

于 2022-09-09 11:02:25 首次发布

本文链接：https://blog.csdn.net/qq_23858785/article/details/126778795

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

18 篇文章 1 订阅

订阅专栏

vue制作npm插件并上传

本文目录如下

- vue制作npm插件并上传

初始化项目

开发插件使用webpack-simple即可

vue init webpack-simple ghn-npm-demo

新建项目后进入项目目录下，分别执行如下命令，初始化必需的npm包，并运行

npm install
npm run dev

开发组件

项目结构如上图所示，在src目录下新建package文件夹，新建vue文件
TestPage.vue，其中dist目录是打包后生成的
需要注意的是组件的name属性

TestPage.vue

<template>
  <div class="container">
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: 'ghn-npm-demo',
  props: ["propData"],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
}
</script>

<style scoped>
.container{
    text-align: center;
}
</style>

暴露组件，新建index.js

在package.json同级目录新建index.js文件，index.js是把testpage.vue文件暴露出去的出口

与main.js的区别：main.js和App.vue是用于本地开发，测试用的入口文件，也就是用于npm run dev的入口文件

index.js
TestPage.name此处使用到组件vue文件中的 name 属性

import TestPage from './src/package/TestPage.vue'
const Main = {
  install: function(Vue) {
    Vue.component(TestPage.name, TestPage)
  }
}
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) { 
	window.Vue.use(Main) 
}
export default Main;

修改package.json

1.name不能与已有的npm包重名，最好的办法是
2.需要修改private字段，private是true的时候不能发布到npm,需设置成false
3.增加main字段，main是打包后的文件入口
4.设置npm上传过滤，添加files属性，设置白名单，只有在files中指定的文件在publish时才会上传

{
  "name": "ghn-npm-demo",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "main": "./dist/ghn-npm-demo.js",
  "files": [
    "dist/*"
  ],
  "private": false,
  "scripts": {
    ...
  }
}

修改webpack.config.js

重点是修改entry和output，参考如下代码

var path = require('path')
var webpack = require('webpack')

// 执行环境
const NODE_ENV = process.env.NODE_ENV;
console.log("-----NODE_ENV===",NODE_ENV);

module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'ghn-npm-demo.js',
    library: 'ghn-npm-demo', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      { 
        test: /\.(svg|ttf|eot|woff|woff2)$/, 
        loader: 'url-loader', 
        options:{ 
        name:'[name].[ext]',
          limit: 9999999
        } 
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  // devtool: '#eval-source-map' //去掉map文件
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

其中入口会根据开发环境，生产环境切换

main.js 是npm run dev 的入口，就是App.vue，用于调试/测试我们开发的组件
index.js是TestPage.vue，就是我们开发的组件，打包到生产环境，只是单纯的ghn-npm-demo组件

修改index.html

添加/修改index.html的js引用路径，因为修改了output 的 filename，所以引用文件的名字也得变

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ghn-npm-demo</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/ghn-npm-demo.js"></script>
  </body>
</html>

打包

npm run build

在dist目录下生成js和map文件，map可以删除，只使用js文件

测试使用（直接加载js）

可以在本项目内，也可以在其他项目中测试，将js文件拷出即可

示例：在本项目使用

main.js引入js文件

import GhnNpmDemo from "../dist/ghn-npm-demo.js"
Vue.use(GhnNpmDemo);

App.vue使用

<template>
  <div id="app">
    ...
    <ghn-npm-demo :propData="msg"></ghn-npm-demo>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'ghn test success'
    }
  }
}
</script>

发布到npm

1 去npm官网注册个账号 https://www.npmjs.com
2 在该组件根目录下的终端，运行如下命令
```
npm login
```
提示输入个人信息，如下图，输入账号密码
3 在该组件根目录下的终端，运行如下命令
```
npm publish
```
每次发布的时候需要修改package .json里面的version，版本必须不一样
4 去自己的npm上点击Packages，能看到发布的包
5 包的具体信息如下

npm下载使用

1 在其他项目下的根目录下运行命令
```
npm install ghn-npm-demo --save
```

2 main.js引入npm包

import GhnNpmDemo from "ghn-npm-demo"
Vue.use(GhnNpmDemo);

3 组件使用

<ghn-npm-demo :propData="str"></ghn-npm-demo>

4 查看npm包
可以看到只显示了package.json中要求显示的部分，即打包后的js，其他文件均隐藏

anjushi_

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue制作npm插件并上传

vue制作npm插件并上传
复制链接

扫一扫

专栏目录

vue制作npm插件并上传

vue制作npm插件并上传

本文目录如下

初始化项目

开发组件

暴露组件，新建index.js

修改package.json

修改webpack.config.js

修改index.html

打包

测试使用（直接加载js）

发布到npm

npm下载使用

“相关推荐”对你有帮助么？