封装UI组件，打包node

最新推荐文章于 2025-10-13 03:19:08 发布

原创最新推荐文章于 2025-10-13 03:19:08 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node

node 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何一步步创建自己的UI组件项目，并进行Node.js打包。首先创建项目，接着下载必要的依赖。然后，设计并实现组件，将代码写入base文件夹的index.js。进一步，通过调整webpack.config.js的entry和output配置来指定入口文件和导出库的名称。最后，修改package.json，将private设为false，设置main属性指向打包后的js文件，并添加files字段以包含dist和src目录。

第一步：创建一个自己的项目

vue init webpack-simple  <project-name>

第二部：下载依赖

npm install  或者  cnpm install

第三步：创建自己的组件（页面输出一段话，随便写的）

1、目录结构如下，name与以后引用名称一致
2、index.js中内容
		import Loading from './loading.vue'
		export default Loading

在这里插入图片描述

第四步：base文件夹下index.js写入代码

import Loading from './components/loading'

const components = {
  Loading
}

const jeremyui = {
  ...components
}

const install = function(Vue) {
  if (install.installed) return
  Object.keys(jeremyui).forEach(key => {
    Vue.component(key, jeremyui[key])
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

const API = {
  ...components,
  install
}

export default API;

第五步：修改webpack.config.js

1、entry修改为’./src/base/index.js’
2、output修改为(library 配置导出库的名称)

	path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'loading.min.js',
    library: 'anchordemo',
    libraryTarget: 'umd'