构建前端npm包

34 篇文章 0 订阅
11 篇文章 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配置文件:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值