简单制作一个NPM包并发布到www.npmjs.com-YES开发框架网

1. 登录NPM官网(https://www.npmjs.com/)并注册账号，已有账号可跳过

2. 准备类库项目

新建项目文件夹 _garson-test

cmd命令进入文件夹，并执行 npm init 命令初始化项目

npm init

添加webpack引用，用于打包命令

cnpm install -D webpack@5.32.0 webpack-cli@4.6.0

修改 package.json 文件

scripts中添加webpack打包命令

webpack打包命令： "start":"webpack"

上传到NPM命令 "upload": "cd dist && npm publish"

"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack",
	"upload": "cd dist && npm publish"
},

修改 main 值为 src/index.js 项目源码放入src目录中

"main": "src/index.js",

添加 "files":["dist"] 配置只上传编译后的文件,dist目录，源码不会上传，

完整的 package.json 如下

{
  "name": "yesweb-libs",
  "version": "1.0.5006",
  "description": "yes快速开发框架web项目公共引用模块",
  "main": "./index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "upload": "cd dist && npm publish"
  },
  "author": "garson_zhang",
  "license": "ISC",
  "dependencies": {
    "Promise": "^1.0.5",
    "axios": "^0.21.1",
    "throttle-debounce": "^3.0.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "copy-webpack-plugin": "^8.1.1",
    "eslint": "^6.7.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5.32.0",
    "webpack-cli": "^4.6.0"
  }
}

切换到项目文件夹，并新建src文件夹

src目录中新建一个 index.js 文件，内容如下

const test = {
	hello(){
		console.log('hello developer!')
	}
}
export { test }

项目目录中添加webpack配置文件 webpack.config.js

var path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
var webpack = require('webpack')
module.exports = {
  mode: 'production',
  // mode: 'development',
  // mode: 'none',
  entry: {
    index: './src/index.js',
    'mixins/index': './src/mixins/index.js',
    'utils/index': './src/utils/index.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    // publicPath: '/dist/',
    filename: '[name].js',
    library: 'laputarenderer',
    libraryTarget: 'umd',
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, './package.json'), // 打包的静态资源目录地址
        to: './', // 打包到dist下面的static
      }],
    }),
  ],

  optimization: {
    //与entry同级
    minimizer: [
      new UglifyJsPlugin(),
      // new UglifyJsPlugin({
      //   include: /\.js$/,
      //   parallel: true,
      //   uglifyOptions: {
      //     compress: false,
      //     mangle: true,
      //     output: {
      //       comments: false,
      //     },
      //   },
      //   sourceMap: true,
      // }),
    ],
  },
}

执行 npm run start 可编译项目得到dist目录

编译后dist目录中得到一个index.js文件：

3. 配置NPM信息

执行 npm login 登录npm账号信息(第一步中得到的账号和密码)

4. 发布NPM包

执行 npm publish 执发布dist目录到 https://www.npmjs.com/

在npm官网查看已经发布的NPM包

可以看到刚刚制作的 garson-test 包已经上传

5. 引用并测试NPM包

测试项目为VUE项目

安装vue-cli，如果已经安装可跳过

npm install -g @vue/cli

安装完成后运行 vue --version 查看版本

如果出现错误

vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅

https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

所在位置行:1 字符: 1

+ vue --version

+ ~~~

+ CategoryInfo : SecurityError: (:) []，PSSecurityException

+ FullyQualifiedErrorId : UnauthorizedAccess

采用cmd窗口运行就能获取了

确保 vue-cli 安装成功后

运行 vue create test 创建项目

项目创建完成后，运行 cnpm install

运行项目： npm run serve

访问如图：

添加 NPM 包

cnpm install -S garson-test

添加个按钮，并调用test.hello 方法：

import { test } from 'garson-test'

methods: {
	testNPM () {
		test.hello()
	}
},