從零開始發佈npm函數庫

查看源碼,覺得有幫助反手給個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