构建前端npm包

参考文章

构建前端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配置文件：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './demo/index.js',  //打包的时候，就把对象挂载到了window对象下面
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './demo/dist'),
        publicPath : './demo/dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[
                    "babel-loader"
                ]
            }
        ]
    }
};

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服务器既可以存放自己的包，如果本地服务器中没有这个包，它会去配置中指定的仓库地址拉取到本地，十分的方便。
可以参考我的另一篇文章。

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 包名，引用试试，成功就成功咯！