封装一个npm组件

[twosugar]

首先我使用vue-cli创建一个名为render-npm的项目 项目地址：https://github.com/twosugar/render-npm
vue create render-npm

安装依赖启动项目

cd render-npm
npm install
yarn serve

由于我们是封装组件 所以需要将组件暴露出来
新建entry.js

import App from "./App.vue";

export default App;

所以我们的打包方式也需要改一下 新增 npm run build-bundle命令


运行npm build-bundle,将会把entry.js作为打包入口
打包后生成dist目录


可以看到css被抽离出来了，其实我们更希望的是css注入到代码中
所以新建vue.config.js文件 对webpack进行配置

module.exports = {
  lintOnSave: false,
  productionSourceMap: false,
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .use("url-loader")
      .loader("url-loader")
      .tap((options) => Object.assign(options, { limit: 10240 }));
  },
  css: { extract: false }
};

css: { extract: false }确保css代码不会被分离出来
打包后每个js文件都有一个map文件
map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。但是会有源码泄露风险，同时增大了打包体积
productionSourceMap: 改成false后将不会生成map文件。

重新运行npm run build-bundle


可以看到css文件和map文件都没有了 ok
配置package.json


好，现在我们可以尝试发布刚刚的组件了

我们可以选择性的上传文件到npm 新建.npmignore， 这里的文件将不会上传

.DS_Store
node_modules
src
public

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

我们需要在npm官网（https://www.npmjs.com/）注册一个账号
然后在命令行键入 npm login 按照提示输入账号、密码、邮箱
值得注意的是在发布前需要将npm切换回官方源
npm config set registry https://registry.npmjs.org/

然后npm publish
发现报错了



原来在package.json中设置"private": true，那么npm将拒绝发布它
移除"private": true, 再npm publish

Ok 提示发布成功👌



我们使用 npm install render-npm --save 将会直接install 刚发布的npm包