dlrpubpackgetest

v0.0.1

Published

4 years ago

经销商上传私服组件模板

Downloads

0High
0Medium
0Low

huanghairong

npm私有库发包模板

简介

为统一前端规范，项目开发中使用的第三方依赖库建议统一发布到公司私有库进行管理维护，避免开发同学在发包构建过程中浪费时间成本，这里提供了一套基于webpack构建的发包模板；该模板分为非vue、vue两套，请根据实际需求使用。

该模板主要实现了以下功能

1、私有npm库发包
2、将打包资源同步到cdn
3、包组织名称检测，防止同名包覆盖（为此我们约定各个团队在组织名称，请移步扩展阅读）
4、 es6代码开发，在项目中以es5的方式使用(babel实现)
5、约定vue组件的封装、导出、打包规范，方便使用方引入使用

代码生成

http://daimon.autohome.com.cn/ 进入主页后选【工具集】，进入【工具集】页面后选“代码生成器”，如下图：

点击“下一步” 按照系统提示将目标项目下载到本地，解压后安装运行

安装

yarn

备注： package.json 中配置了prepublish 的执行检测，install也会触发该事件的执行，所以在安装之前确认一下 package.json配置的name是否符合格式规范(@athm.dealer.团队名/包名), 其中团队名的规则在 ‘./build/webpack.publish.config.js’ 配置文件中有定义，开发者可自行进行扩展

发包

发私有库; 备注发包之前请确认修改了 version: 版本号，版本号重复将导致发包失败

yarn publish

发cdn

yarn pubcdn

git 地址

扩展阅读【可选】

组织命名规范约定

为防止各个团队在发包时，将其它团队已有的包覆盖，我们约定了包的组织命名规则，以各个业务团队进行命名，约定如下:

/**
   * 包命名规则：@athm.dealer.{团队名称}/{包名}: 例如： @athm.dealer.arch/car
   * athm.dealer.frontend: 经销商事业部-经销商技术部-前端团队
   * athm.dealer.resource: 经销商事业部-经销商技术部-商业资源团队
   * athm.dealer.arch: 经销商事业部-经销商技术部-数据架构团队
   * athm.dealer.ics: 经销商事业部-经销商技术部-i车商技术团队
   * athm.dealer.pioneer: 经销商事业部-经销商技术部-新产品技术团队
   * athm.dealer.app: 经销商事业部-经销商技术部-移动APP团队
   * athm.dealer.info: 经销商事业部-经销商技术部-经销商信息系统团队
   * athm.dealer.tuan: 经销商事业部-经销商技术部-营销活动团队
   * athm.dealer.sjhd: 经销商事业部-经销商技术部-试驾活动团队
   * athm.dealer.qa: 经销商事业部-经销商技术部-质量保证团队
   */

组织命名有改动怎么办

在模板中对各个团队的命名约定定义在配置文件中，开发人员在组织发生变动后可以修改这个配置文件内容: './build/webpack.publish.config.js'

packageNameRules:/^@athm\.dealer\.(frontend|resource|arch|ics|pioneer|app|info|tuan|sjhd|qa)\/{1}.+/gi

按照这种约定方式，每个组上传的多个包，只受本组的管理。

如果您对私有库发包不是很了解，请链接下方地址

私有包相关帮助文档

如何使用webpack 上传cdn 插件

cdn上传插件相关使用帮相文档

如何在模板里配置我的cdn上传参数

配置文件地址: ./build/webpack.publish.config.js, 相关配置如下：

    {
      isUpload:true, // 是否上传cdn
      uploadConfig:{ // 上传cdn 配置
        root: path.resolve(process.cwd(), './', 'dist'),
        keyPrefix:'二级目录/三级目录/',//生成路径：/dealer/二级目录/三级目录
        username: '{your user name}',
        password: '{your password}',
        distDir:  'dist'
      }
    }

如何在上传cdn文件成功后，获取文件地址

文件上传成功后会在命令行窗口输出以下内容:

根据上图提示的js地址:

https://x.autoimg.cn/dealer/athm.dealer.arch/webpacktemplate/%40athm.dealer.arch/webpack-template-vue/0.0.5/index.min.js

使用时通过cdn方式引入，如何设置注入的window全局变量

定义你的js组件在window 全局中的变量注入名称（相当重要）,通过build 构建出来的包，在以cdn方式进入后，将会在window全局注入一个变量名称，调用方式如：window.dlrmass.getUser(); 为防止全局变量名覆盖需要在 ./lib/webpack.build.config.js 中进行修改你的全局变量名

{
  output:{
    library: 'dlrmass', // 注入window全局的变量名称，请自行修改
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
}

在浏览器里这样调用

<script src=https://x.autoimg.cn/dealer/athm.dealer.arch/webpacktemplate/%40athm.dealer.arch/webpack-template-vue/0.0.5/index.min.js"></script>
<script type="text/javascript">

window.onload = function (params) {
    window['dlsmass'].testGetUser();
    // 如果不清楚dlrmass 怎么来的，可以翻到’js全局变量注入配置‘查看
}

</script>

如何使用发布后的包

node环境

以本demo为示例，先将包安装到本地,再导入使用


yarn add @athm.dealer.arch/webpack-template --save

在你的项目中

import {testGetUser} from '@athm.dealer.arch/webpack-template'

testGetUser() // 导入后直接调用

如果是vue组件，你可以在vue中这样使用

import Vue from 'vue'
import {helloComp} from '@athm.dealer.arch/webpack-template-vue'
Vue.use(helloComp)

然后在你的vue项目中直接使用标签

<template>
    <hello-comp>
    </hello-comp>
</template>

浏览器环境

js文件可以从cdn引入，或直接在浏览器中外链引入js文件

https://x.autoimg.cn/dealer/athm.dealer.arch/webpacktemplate/%40athm.dealer.arch/webpack-template-vue/0.0.5/index.min.js
<script type="text/javascript">

window.onload = function (params) {
    window['dlsmass'].testGetUser();
    // 如果不清楚dlrmass 怎么来的，可以翻到’js全局变量注入配置‘查看
}

</script>

如果是vue组件，你可以直接在浏览器中外链引入，然后写vue标签

<body>
<div id="app">
    <hello-comp></hello-comp>
</div>
</body>

后期规划

随着各团队组件库的丰富，你可以会面临这几个想法；组件包越来越多，应该收集到一个工程项目中，而且还可以把各个组件公用的代码提炼出来，形成一个组件库的管理方式，一次发一个整包，这样使用者就可以按需import自己想要的包了，但是接下来会面临着版本不易管理，整包发cdn提交过大等诸多问题。

Monorepo :可以解决上述问题，通过它可以实现一个工程管理多个项目代码，将依赖包集中托管运行，每个组件可独立发布。后期规划加入 Monorepo。

目录结构

webpack-dep
 ┣ 📂build
 ┃ ┣ 📂lib
 ┃ ┃ ┣ 📜postpublish.js
 ┃ ┃ ┗ 📜prepublish.js
 ┃ ┣ 📜webpack.base.config.js
 ┃ ┣ 📜webpack.build.config.js
 ┃ ┣ 📜webpack.dev.config.js
 ┃ ┗ 📜webpack.publish.config.js
 ┣ 📂example
 ┃ ┣ 📜index.html
 ┃ ┗ 📜index.js
┣ 📂public
 ┃ ┗ 📜index.html
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📂css
 ┃ ┃ ┗ 📂image
 ┃ ┣ 📂lib
 ┃ ┗ 📜index.js
 ┣ 📜.babelrc
 ┣ 📜.browserslistrc
 ┣ 📜.editorconfig
 ┣ 📜.eslintignore
 ┣ 📜.eslintrc.js
 ┣ 📜.gitignore
 ┣ 📜.npmrc
 ┣ 📜package.json
 ┗ 📜yarn.lock

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

npm私有库发包模板

简介

代码生成

安装

发包

git 地址

扩展阅读【可选】

如何使用发布后的包

后期规划

目录结构