18-教你学会发布自己的npm包（webpack打包版本）

1. 先把你的功能写好，才能发布
   新建一个目录，名为包名
   

2. 创建src目录，存放dateFormat.js，index.js
   dateFormat.js:

   //格式化时间
   function dateFormat(stStr){
       const dt = new Date(stStr);
       const y = dt.getFullYear();
       const m = padZero(dt.getMonth() + 1);
       const d = padZero(dt.getDate());
       const h = padZero(dt.getHours());
       const mm = padZero(dt.getMinutes());
       const s = padZero(dt.getSeconds());
       return `${y}-${m}-${d} ${h}:${mm}:${s}`;
   }
   //时间补零函数
   function padZero(n) {
       return n < 10 ? '0' + n : n;
   }
   
   module.exports = {
       dateFormat
   }
   

   入口文件 index.js:

   //包的入口文件
   const date = require('./dateFormat')
   
   //向外暴露需要的成员
   module.exports = {
       ...date
   }
   

3. 可在项目根目录配置 .gitignore 文件，打包时会忽略的文件,

   这样打包后的文件就不会有src的代码

   .gitignore 文件里面直接写 src/

4. 根目录下新建package.json
   安装 Webpack 和 webpack-cli
   npm install --save-dev webpack webpack-cli
   

5. 创建项目配置文件 webpack.config.js

   const path = require('path');
   
   module.exports = {
    // 入口文件
    entry: './src/index.js',
   
    // 输出文件bundle.js
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',//输出文件
      library:'myModule',
      libraryTarget:'commonjs'
    },
    mode: 'production',
    // 模块配置
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        }
      ]
    },
   
    // 解析配置
    resolve: {
      extensions: ['.js', '.jsx', '.css', '.less']
    },
   
    // 开发工具配置
    devtool: 'source-map',
   
    // 开发服务器配置
    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      port: 3000
    }
   };
   

6. 安装缺少的依赖包 例如 babel-loader、style-loader、css-loader

7. package.json配置命令

   {
       "name": "wyy_npm_practice",
       "version": "2.1.2",
       "main": "./dist/bundle.js",
       "description": "提供了格式化工具、HTMLEscape相关的功能",
       "scripts": {
           "dev": "webpack serve --mode development",
           "build": "webpack --mode production" 
       },
       "keywords": [
           "wyy",
           "dateFormat"
       ],
       "license": "ISC",
       "devDependencies": {
           "webpack": "^5.89.0",
           "webpack-cli": "^5.1.4",
           "webpack-dev-server": "^4.15.1"
       },
        "dependencies": {
           "babel-loader": "^9.1.3",
           "css-loader": "^6.9.0",
           "style-loader": "^3.3.4"
       }
   }
   

   6. 写一个README说明文档方便别人查看使用
      README.md

      ## 安装
      ```
      npm install wyy_npm_practice
      ```
      
      ## 使用
      ```新建个xxx.js文件，node xxx.js 命令脚本执行 时间格式化
      const wyy = require('wyy_npm_practice')
      const dt = new Date();
      const newDT = wyy.myModule.dateFormat(dt);
      console.log(newDT);
      ```
      
      ## 开源协议
      ISC
      

   7. 执行打包命令

      npm run build ，之后生成一个dist文件夹，里面有我们在配置文件里配置的输出文件
      

   8. 接下来发布npm包
      在包的根目录下，执行npm publish 命令,即可发布到npm官网上，
      包名不能雷同，可先去npm官网查询，是否已存在这个包名

      

   9. 这样就成功发布啦！！去npm官网看看你发布的包吧~
      

   10. 怎么删除发布的包

​ 12. npm包更新版本

​ npm version 1.1.0

​ npm publish

了解一些npm命令和包相关知识

• npm install

  npm包管理工具会先读取package.json文件中的dependencies节点，
  读取到所有的依赖包名称和版本号之后，会一次性下载到项目中

• npm uninstall 卸载包

• npm i xxx 安装第三方包
  例如：npm i moment 安装名为moment的包

• npm i moment@2.29.4 指定版本号

• 包的语义化版本规范

  • 版本号格式：主版本号.功能版本号.bug修订号 例如：2.24.0
  • 版本号提升的规则：只要前面的版本号提升，后面的版本号都要归零

• 包管理配置文件：package.json

  • 用来记录当前项目安装了哪些第三方包的版本号，安装位置，依赖关系等信息
  • 从而方便剔除体积过大的node_modules文件夹，在团队成员之间同步第三方包
  • dependencies: 专门记录项目运行所依赖的第三方包
  • devDependencies: 专门记录项目只在开发中用的包，上线之后不会用到
    • npm i 包名 -D

• 淘宝镜像

• 解决下包速度慢的问题，用淘宝镜像

• nrm工具，帮你更加方便切换淘宝镜像

• 项目包分类