美文网首页
从零开始发布npm包

从零开始发布npm包

作者: 焦糖大瓜子 | 来源:发表于2019-09-26 10:16 被阅读0次

    查看源码,觉得有帮助反手给个star吧
    概要:

    • 创建一个叫biu-function的javascript函数库
    • 使用wepback构建umd形式的包
    • 使用npm发布上线

    一. npm注册、登陆

    1. 注册账户网站: 前往npm官网
    2. 登陆:
    npm login 
    // 然后输入账号密码
    

    二. webpack构建项目架子

    2.1 创建目录

    mkdir biu-function
    cd biu-function
    

    2.2 初始化

    // 配置函数库名、版本号、作者......
    npm init
    

    2.3 webpack安装
    webpack中文网

    // 以开发依赖的形式安装
    npm install --save-dev webpack
    npm install --save-dev webpack-cli
    

    webpack-cli可以用于在命令行直接执行webpack命令

    2.4 webpack配置
    在根目录创建webpack.config.js

    npm install --save-dev clean-webpack-plugin
    
    // node 核心模块,处理路径相关
    const path = require('path')
    // webpack插件,新版本用法发与webpack中文网上写的有点出入,需要注意
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    // 引入模板文件, 看你需不需要
    // const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      mode: 'production',
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        libraryTarget: 'umd',
        library: 'Biu', // Peanut 可以随便更换,不是固定值,是函数库名字,类似Jquery
      },
      plugins: [
             new CleanWebpackPlugin(),
            //  new HtmlWebpackPlugin({ template: './src/index.html' }),
            ],
    
    }
    

    扩展阅读:
    // TODO

    2.5 支持es6语法, 可以跳过

    前往Babel中文网

    将 ES2015+ 语法的 JavaScript 代码编译为能在当前浏览器上工作的代码。这将涉及到新语法的转换和缺失特性的修补。这里需要使用babel

    2.5.1 安装babel依赖包

    npm install --save-dev babel-loader @babel/core @babel/cli @babel/preset-env
    npm install --save @babel/polyfill
    

    2.5.2 babel预设配置在根目录下创建配置文件babel.config.js或者.babelrc

    • babel.config.js
    const presets = [
      [
        "@babel/env",
        {
          targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1",
          },
          useBuiltIns: "usage",
        },
      ],
    ];
    module.exports = { presets };
    
    • .babelrc
      {
        "presets": [
            [
              "@babel/env",
              {
                "targets": {
                  "edge": "17",
                  "firefox": "60",
                  "chrome": "67",
                  "safari": "11.1",
                },
                "useBuiltIns": "usage",
              },
            ],
          ],
        "plugins": []
      }
    

    2.5.3 webpack配置babel-loader解析es6

    module: {
                rules: [
                  {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                      loader: 'babel-loader',
                      options: {
                        presets: ['@babel/preset-env']
                      }
                    }
                  }
                ]
              }
    

    三. 函数库编写

    mkdir src
    touch src/index.js
    
    // index.js
    function add(a, b) {
        return a + b
      }
      export default {add}
    

    函数导出可以直接export或者export default导出变量、对象,这个会影响import。
    例如:

    export default { add }
    // 使用import引入 import Biu from 'biu-function'
    // 这个Biu就是导出的default对象
    // 使用 script标签引入,则需要使用Biu.default.add()
    // Biu实在webpack.config.js定义的library的名字
    

    四. 构建与发布

    1. 在package.json文件修改srcipt,增加webpack构建,可以增加额外webpack配置
      "build": "webpack"
      // "build": "webpack --config webpack.config.js"
    
    1. 将package.json文件的main(入口),改成对应构建的结果,便于函数库引入
      "main": "dist/index.js"
    
    npm run build // 相当于执行 webpck进行打包
    npm publish // 直接发布
    

    发布成功可以在npm官网找到上传的包

    五. 安装与引入使用

    npm install biu-funciton
    

    在文件中的引入,使用

    import Biu  from 'biu-function';
    console.log(Biu.add(1,2), 'Biu'); // 3 Biu
    

    六. 源码

    前往查看源码,觉得有帮助反手给个star吧


    参考资料:

    1. webpack中文网
    2. Babel中文网
    3. github仓库clean-webpack-plugin

    相关文章

      网友评论

          本文标题:从零开始发布npm包

          本文链接:https://www.haomeiwen.com/subject/zktgyctx.html