1.建立個文件夾，使用如下命令生成packge.json文件
npm init -y
2.安裝如下幾個依賴
webpack //打包工具
webpack-cli //webpack4 之後都要裝這個
babel-loader //webpack loader，來處理 es代碼
@babel/cli //babel7
@babel/core
@babel/polyfill
@babel/runtime
npm i webpack webpack-cli @babel/cli @babel/core babel-loader --save-dev
npm i @babel/polyfill @babel/runtime --save
3. 安裝完成之後，我們建立幾個子文件夾，如下
+---- build #放webpack配置文件
+---- dist #打包輸出文件
+---- src #源代碼文件夾
4.配置webpack.config.js打包文件如下，配置packjson打包命令如下（不配終端運行這個命令也行）src放入組件源碼（或者寫組件）
webpack.config.js內容
const path = require("path");
module.exports = {
mode: 'production', // 生產環境，壓縮代碼
// 出口對象中，屬性爲輸出的js文件名，屬性值爲入口文件
entry: ["./src/index.js"], //入口文件,從項目根目錄指定
output: { //輸出路徑和文件名，使用path模塊resolve方法將輸出路徑解析爲絕對路徑
library: 'asia-zhang', // 庫名字, 取名叫asiaCrypto, 可以直接調用，比如window.asiaCrypto
libraryTarget: 'umd', // 輸出library規範代碼, umd是兼容amd和cmd的
umdNamedDefine: true ,// 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define
// 修改打包出口，在最外級目錄打包出一個 index.js 文件，我們 import 默認會指向這個文件
path: path.resolve(__dirname, './dist'),
filename: "asia-zhang.js",
},
devtool: 'source-map',
packjson配置
"scripts": {
"build": "webpack --config build/webpack.config.js"
}
5.爲庫加入eslint 代碼審查，既然是用作js基礎庫，必定要保證質量，這裏用eslint來進行代碼審查。
在根目錄建一個.eslintrc.js文件。該文件是eslint的配置文件
eslintrc.js文件內容
module.exports = {
env: { //環境
browser: true,
es6: true
},
extends: "eslint:recommended", // 官方推薦的校驗配置
globals: { // 預設一些全局變量，eslint校驗這些
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
parserOptions: {
"ecmaVersion": 2018,
"sourceType": "module"
},
rules: { // 規則
/* 風格 */
'indent': [0, 4], // 4個空格縮進
'semi': [1, 'always'], // 結尾使用分號
}
};
webpack裏面配置
module: {
rules: [
{
//前置(在執行編譯之前去執行eslint-loader檢查代碼規範，有報錯就不執行編譯)
test: /.(js)$/,
enforce: 'pre', // 在執行編譯之前去執行eslint-loader檢查代碼規範，有報錯就不執行編譯
exclude: /node_modules/,
loader: "eslint-loader",
options: {
formatter: function(results) {
return "output";
}
}
}
// ...其他代碼
]
}
安裝代碼檢查
npm i eslint --save-dev
6.npm 發佈包，需要登錄npm賬號，沒有去npm官網註冊一個https://www.npmjs.com
npm login // 登陸
Username: <用戶名>
Password: <密碼>
Email: (this IS public) <郵箱地址>
Logged in as javanx on https://registry.npmjs.org/.
執行npm publish // 發佈。我這邊發佈遇到坑
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! no_perms Private mode enable, only admin can publish this module:...
...
終端命令：npm config get registry
https://registry.npm.taobao.org/
需要切換鏡像源
npm config set registry=http://registry.npmjs.org
接着npm publish 發佈提示
npm ERR! code ENEEDAUTH
npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using `npm adduser`
好吧，就npm login 或者npm adduser 結果都報
code E400
npm ERR! Registry returned 400 for PUT on http://registry.npmjs.org/-/user/org.couchdb.user:asiazhang: That email has already been registered.
最後直接登錄官網，才發現username錯誤，沒有錯誤提示。換成就可以了
發佈成功
npm view 庫名，可以查看的npm庫信息
7.項目裏packjson，添加你的庫，然後npm install，引入你的組件，至此完成
結語：這是實現的組件以單獨項目webpack打包形式，發包npm。
todo：
1.npm包，引入git源碼方式（減少源碼爆漏）
2.npm 單獨項目webpack 隱藏src，爆漏打包後js（嘗試，減少源碼爆漏）
需要關注，代碼壓縮混淆後，瀏覽器加載js可讀性，源碼安全性