构建前端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": "[email protected]",
"license": "MIT"
}
4.测试包是否能够使用
到某个项目下，npm install 包名，引用试试，成功就成功咯！