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

妖狐艹你老母 2023-06-07 03:10 10阅读 0赞

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

[https_www.npmjs.com]: https://www.npmjs.com