构建前端npm包

拼搏现实的明天。 2022-05-22 23:28 337阅读 0赞

[参考文章][Link 1]

## 构建前端npm库开发框架 ##

看完整篇文章之后，我们会发现整个脚手架，最关键的莫过于webpack的配置文件，我们为每个模块配置loader，入口、出口。然后通过package.json的script，来配置执行不同webpack配置项的脚本，将结果输出到指定的目录。

说白了，自己构建一个脚手架的、或者npm开发包的流程，就是配置webpack的流程。

这就解决了共用一个node\_modules等等问题。

本文比较有价值的内容还有npm仓库的文件夹配置。

#### 先来看一条打包的命令 ####

"build:vui": "webpack --progress --hide-modules --config build/webpack.build.js && rimraf examples/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.build.min.js"

### 基础知识准备 ###

#### 名词解释 ####

--------------------

**cross-env NODE\_ENV=production**

简单来说，就是windows不支持NODE\_ENV=development的设置方式。

但是，又不想放弃这样简单方便的方式，于是只好求助于Google了。

解决方式  
功夫不负有心人，在万能的google上，我找到了解决方法：cross-env。  
这个迷你的包能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。

使用方法：  
安装cross-env:npm install cross-env –save-dev

## 在NODE\_ENV=xxxxxxx前面添加cross-env就可以了。 ##

**webpack –progress –hide-modules –config**

–progress： 打印出编译进度的百分比值

–hide-modules： 隐藏关于模块的信息

–config ： 使用配置文件

--------------------

**rimraf examples/dist**

级联删除整个文件夹

--------------------

__dirname：    获得当前执行文件所在目录的完整目录名
    __filename：   获得当前执行文件的带有完整绝对路径的文件名
    process.cwd()：获得当前执行node命令时候的文件夹目录名 
    ./：           文件所在目录

#### 1、改造目录结构 ####

1.1. 增加src目录

**说明**：src目录主要用来存放组件注册的主入口，工具方法等

1.2. 增加lib目录

**说明**：lib目录主要用来存放打包后的源码

1.3. 增加example目录

**说明**：用于存放开发的demo代码

1.4. package目录：用来存放源代码

在package/index.js引入所有包，并且导出

代码示例如下：

import {tools3D} from "./lib/cwComponents/3d_factory";
    import {cwEventBus} from "./lib/cwComponents/eventBus/eventBus";
    export {tools3D,cwEventBus};

entry: {
      'vendor': ['vue', 'vue-router'],
      'vui': './examples/src/index.js'
    },
    // ...
    plugins: [
      // ...
      // 将入口改成examples/src/index.tpl
      new HtmlWebpackPlugin({
        chunks: ['vendor', 'vui'],
        template: 'examples/src/index.tpl',
        filename: 'index.html',
        inject: true
      })
    ]

#### 2.改造build文件 ####

可以打包到lib目录下。

入口文件：

/** * Created by Administrator on 2017/4/21 0021. */
    
    /** * 文件名：3d_factory * 功能：三维引擎与vue controller的中间层， * 用于方便三维引擎的切换 * */
    //初始化三维场景
    
    
    import {tools3D} from "../lib/cwComponents/3d_factory";
    import {cwEventBus} from "../lib/cwComponents/eventBus/eventBus";
    window.tools3D = tools3D;
    window.cwEventBus = cwEventBus;

配置打包的webpack配置文件：

#### 3.开始构造npm包 ####

3.1. 注册npm账号

npm install -g nrm 
    
    nrm add ascs http://192.168.2.25:4875
    
    npm init
    # package name: (qiangdada520-npm-test)
    # version: (1.0.0)
    # description: npm test
    # entry point: (index.js) index.js
    # test command:
    # git repository:
    # keywords: npm test
    # author: qiangdada
    # license: (ISC)

3.2. 连接npm仓库  
有些代码我们不希望放在公网上让别人下载，那么可以自己搭建私有npm服务器。私有的npm服务器既可以存放自己的包，如果本地服务器中没有这个包，它会去配置中指定的仓库地址拉取到本地，十分的方便。  
[可以参考我的另一篇文章。][Link 2]

npm set registry http://192.168.2.25:4875
    npm adduser --registry http://192.168.2.25:4875

或者：

nrm use ascs

npm adduser
    # Username: 填写你自己的npm账号
    # Password: npm账号密码
    # Email: (this IS public) 你npm账号的认证邮箱
    # Logged in as xuqiang521 on https://registry.npmjs.org/. 连接成功

3.3. 发布组件库

3.3.1. 可以在`package`文件夹下简单的写点内容  
3.3.2. 配置`npm script` ，让`package`打包输出压缩后的文件到`lib`  
3.3.3. 在lib目录下使用`npm init`,创建包的描述文件,这里最关键的是注意`main`的入口文件

{
      "name": "@cityworks/rocket-ui",
      "version": "1.0.0",
      "description": "cityworks 前端组件库",
      "main": "rocketUi.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      // npm 发布出去的包包含的文件
      "files": [
        "lib",
        "src",
        "packages" //如果你不想把源码放出去，可以不包含这个目录，因为lib下面已经包含了打包后的代码
      ],
      "keywords": [
        "UI"
      ],
      "author": "yueshenghu@ascs.tech",
      "license": "MIT"
    }

#### 4.测试包是否能够使用 ####

到某个项目下，npm install 包名，引用试试，成功就成功咯！

[Link 1]: https://blog.csdn.net/github_36369819/article/details/79606380#t23
[Link 2]: https://blog.csdn.net/y491887095/article/details/80247142