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

前言

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

import $ from "jquery";

完成组件的开发

完成组件开发后
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'