查看源碼,覺得有幫助反手給個star吧
概要：

• 創(chuàng)建一個叫biu-function的javascript函數(shù)庫
• 使用wepback構(gòu)建umd形式的包
• 使用npm發(fā)布上線

一. npm注冊、登陸

1. 注冊賬戶網(wǎng)站： 前往npm官網(wǎng)
2. 登陸：

npm login 
// 然后輸入賬號密碼

二. webpack構(gòu)建項目架子

2.1 創(chuàng)建目錄

mkdir biu-function
cd biu-function

2.2 初始化

// 配置函數(shù)庫名、版本號、作者......
npm init

2.3 webpack安裝
webpack中文網(wǎng)

// 以開發(fā)依賴的形式安裝
npm install --save-dev webpack
npm install --save-dev webpack-cli

webpack-cli可以用于在命令行直接執(zhí)行webpack命令

2.4 webpack配置
在根目錄創(chuàng)建webpack.config.js

npm install --save-dev clean-webpack-plugin

// node 核心模塊，處理路徑相關
const path = require('path')
// webpack插件，新版本用法發(fā)與webpack中文網(wǎng)上寫的有點出入，需要注意
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 可以隨便更換，不是固定值,是函數(shù)庫名字，類似Jquery
  },
  plugins: [
         new CleanWebpackPlugin(),
        //  new HtmlWebpackPlugin({ template: './src/index.html' }),
        ],

}

擴展閱讀：
// TODO

2.5 支持es6語法, 可以跳過

前往Babel中文網(wǎng)

將 ES2015+ 語法的 JavaScript 代碼編譯為能在當前瀏覽器上工作的代碼。這將涉及到新語法的轉(zhuǎn)換和缺失特性的修補。這里需要使用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預設配置在根目錄下創(chuàng)建配置文件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']
                  }
                }
              }
            ]
          }

三. 函數(shù)庫編寫

mkdir src
touch src/index.js

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

函數(shù)導出可以直接export或者export default導出變量、對象，這個會影響import。
例如：

export default { add }
// 使用import引入 import Biu from 'biu-function'
// 這個Biu就是導出的default對象
// 使用 script標簽引入，則需要使用Biu.default.add()
// Biu實在webpack.config.js定義的library的名字

四. 構(gòu)建與發(fā)布

1. 在package.json文件修改srcipt，增加webpack構(gòu)建，可以增加額外webpack配置

  "build": "webpack"
  // "build": "webpack --config webpack.config.js"

2. 將package.json文件的main(入口)，改成對應構(gòu)建的結(jié)果，便于函數(shù)庫引入

  "main": "dist/index.js"

npm run build // 相當于執(zhí)行 webpck進行打包
npm publish // 直接發(fā)布

發(fā)布成功可以在npm官網(wǎng)找到上傳的包

五. 安裝與引入使用

npm install biu-funciton

在文件中的引入，使用

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

六. 源碼

前往查看源碼,覺得有幫助反手給個star吧

參考資料：

1. webpack中文網(wǎng)
2. Babel中文網(wǎng)
3. github倉庫clean-webpack-plugin