前端组件化--webpack打包编辑js库，发布到npm

 

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可读性，源码安全性