学习发布npm包这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情前言在平常工作中常常会自己

这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

前言

在平常工作中常常会自己开发一些常用的业务组件，平常管理方式就是来回拷贝，当组件多的时候就变得尤为不便，学习将自己开发的组件发布到npm上面，不仅能够方便自己使用，而且维护起来也很方便。更重要的是能掌握一项技能。

本篇文章记录了我自己在学习发布npm包的过程中所做的记录。

成果展示

我司UI同学设计的页面常常使用这种带前缀的分割线以区分不同的内容，一些组件库的分割线组件往往不满足，与其做二次开发，不如做一套自己的分割线组件。

大家可以在这看到我发布的这个分割线组件 @codeniu/vue-divider - npm (npmjs.com)。

再此查看在线demo： vue-divider (codeniu.github.io)

截图：

npm 账号

注册

你需要一个 npm 账号, 在这注册。

创建项目

初始化

webpack 配置

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'vue-divider.min.js',
    library: 'NiuDivider',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
}

发布

在终端中输入

npm publish --access=public

--access=public: Scoped packages 会被自动发布为私有包, 这个参数告诉 npm 我们想让每个人都可以使用这个模块。

发布成功后你会收到一封邮件，像这样的。

看到没，npm 爱你呦

参考文章

webpack 之 module

vue-loader

yarn add vue-loader -D

它是基于 webpack 的一个的 loader 插件，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 loader 去处理如 style-loader 、 less-loader 等等，核心的作用，就是 提取 。

安装完包后配置 webpack.config.js 文件：

module:{
    rules:[
        {
            test: /\.vue$/,
            use: ['vue-loader'],
        },
    ]
}

vue-template-compiler

// vue 2.x
yarn add vue-template-compiler -D

//vue 3.x
yarn add @vue/compiler-sfc -D

将 .vue 文件的 template 编译成 AST （抽象语法树）。

Vue 2.x 时代，需要 vue-template-compiler 插件处理， Vue 3.x 则变成 @vue/compiler-sfc。

bable-loader

yarn add @babel/core @babel/preset-env bable-loader -D

@babel/core： babel 的核心库。
@babel/preset-env：它取代了 es2015 es2016 es2017 ，通过配置浏览器版本的形式，将编译的主动权，交给了插件。
babel-loader： webpack 的 loader 插件，用于编译代码，转化成浏览器读得懂的代码。

安装完上述插件之后，我们在 webpack.config.js 下添加如下代码

module: {
 rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/, // 不编译node_modules下的文件
      loader: 'babel-loader'
    },
  ]
}

编译的时候，需要读取配置，最新的 babel 配置文件需要在根目录下添加 babel.config.js 文件：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          // browsers: ["last 2 versions"], // 最近 2 个版本的浏览器
          browsers: ["last 1 chrome version"],
        },
      },
    ],
  ],
};

cross-env

配置多环境

安装 cross-env

yarn add cross-env -D

在 package.json 添加脚本

// 旧
"scripts": {
    "dev": "webpack serve --progress --config ./webpack.config.js",
    "build": "webpack --config ./webpack.config.js"
},

// 新
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack server --open --hot --content-base='./demo/'",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},

总结

以上就是我从开发组件到发布的全过程了，项目源码可以再此查看。Codeniu/vue-divider: vue-divider is a dependency-free, lightweight vue component. This is a study project, You will learn how to build a npm package from this project. You can also learn some webpack configurations. (github.com)

学习发布npm包

前言