Vue

如何将你封装的组件使用 npm 发布

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前言

我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:

import $ from "jquery";

如何将你封装的组件使用 npm 发布

完成组件的开发

完成组件开发后
1、修改webpack.config.js 这个文件

// ... 此处省略代码 

module.exports = {
  entry: './src/main.js',
  output: {
    // 修改打包出口,在最外级目录打包出一个 index.js 文件,我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'npm-test.js',
    library: 'npm-test', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  // ... 此处省略代码 
}

2、修改 package.json 文件

// 发布开源因此需要将这个字段改为 false
"private": false,

// 这个指 import npm-test 的时候它会去检索的路径
"main": "dist/npm-test.js",

发布到npm

发布命令其实就是两句话
// 这里需要你有一个 npm 的账号,文章开头有官网链接

npm login   // 登陆 
Username: <用户名>
Password: <密码>
Email: (this IS public) <邮箱地址>
Logged in as javanx on https://registry.npmjs.org/.

你会说没有注册,怎么登陆,他会检测你没有注册,就会去注册了。

npm publish // 发布

完成之后我们就可以在项目中安装使用了

npm install npm-test -S

项目中用

import CustomUI from 'npm-test'
(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

关键词:, ,

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注