从0搭建rollup+vue组件模板,轻松发布npm、githubpages

2019-07-13 admin

前言

既然是rollup+vue组件模板,就不说明为什么采用这个模式来开发组件了。 需要了解rollup的看文档:rollup官方文档

rollup打包

找个文件夹,开干

mkdir vue-rollup-component-template
cd vue-rollup-component-template
npm init

安装 rollup

npm i -D rollup

配置文件 rollup.config.js

export default {
  input: 'src/index.js',
  output: {
    name: 'vue-rollup-component-template',
    file: 'dist/vue-rollup-component-template.js',
    format: 'umd'
  }
}

入口文件 src/index.js

const x = 1;

export default (y) => x + y

修改 package.json 命令

"scripts": {
    "build": "rollup --config rollup.config.js"
}

打包

npm run build

完成了一个简单的打包。

不同打包格式与命令

"scripts": {
    "build": "npm run build:browser && npm run build:es && npm run build:umd",
    "build:browser": "rollup --config build/rollup.config.browser.js",
    "build:es": "rollup --config build/rollup.config.es.js",
    "build:umd": "rollup --config build/rollup.config.umd.js"
},

通用配置 build/rollup.config.base.js

export default {
  input: 'src/index.js',  //入口
  plugins: [] // 插件
}

安装js压缩插件

npm i -D rollup-plugin-uglify-es

build/rollup.config.es.js

import base from './rollup.config.base'
import uglify from 'rollup-plugin-uglify-es' //js压缩

const config = Object.assign({}, base, {
  output: {
    exports: 'named',
    name: 'vue-rollup-component-template',
    file: 'dist/vue-rollup-component-template.min.js',
    format: 'iife'
  },
})

config.plugins.push(uglify())

export default config
  • umd – 通用模块定义,以amd,cjs 和 iife 为一体。

build/rollup.config.browser.js

import base from './rollup.config.base'

const config = Object.assign({}, base, {
  output: {
    exports: 'named',
    name: 'vue-rollup-component-template',
    file: 'dist/vue-rollup-component-template.umd.js',
    format: 'umd'
  },
})

export default config

  • iife – 一个自动执行的功能,适合作为< script >标签。

build/rollup.config.browser.js

import base from './rollup.config.base'
import uglify from 'rollup-plugin-uglify-es' //js压缩

const config = Object.assign({}, base, {
  output: {
    exports: 'named',
    name: 'VueRollupComponentTemplate',
    file: 'dist/vue-rollup-component-template.min.js',
    format: 'iife'
  },
})

config.plugins.push(uglify())

export default config

打包

npm run build

安装插件

组件开发少不了引入模块、es6等,需要用 插件(plugins) 在打包的关键过程中更改 Rollup 的行为。

npm i -D rollup-plugin-node-resolve rollup-plugin-commonjs
npm i -D  rollup-plugin-vue vue vue-template-compiler

修改build/rollup.config.base.js

import resolve from 'rollup-plugin-node-resolve' // 告诉 Rollup 如何查找外部模块
import commonjs from 'rollup-plugin-commonjs' // 将CommonJS模块转换为 ES2015 供 Rollup 处理
import vue from 'rollup-plugin-vue' // 处理vue文件
import babel from 'rollup-plugin-babel'  // rollup 的 babel 插件,ES6转ES5

export default {
  input: 'src/index.js',
  plugins: [
    resolve({ extensions: ['.vue'] }),
    commonjs(),
    vue(),
    babel()
  ]
}

rollup-plugin-babel 插件需要 babel 支持

npm i -D babel-core babel-preset-env babel-preset-stage-3 rollup-plugin-babel@3.0.0

新建 .babelrc

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
}

组件开发与root设置

设置 root

npm i -D babel-plugin-module-resolver

.babelrc 增加 plugins

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["src/"]
      }
    ]
  ]
}

从而src目录下的模块引入,不需要’…/…/’,只要 (年龄小的、身材好的)

import VList from 'components/list'
import util from 'utils/util'
import mixins from 'mixins/mixin'
...

组件开发

src/components/list/main.vue

<template>
  <div class="v-list">
    <slot/>
    <div class="v-list-date">
      <div class="v-list-date-label">当前时间:</div>
      <div class="v-list-date-text">{{date}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VList',
  data() {
    return {
      date: new Date()
    }
  }
}
</script>

src/components/list/index.js

import Main from './main';
export default Main

src/index.js

import VList from 'components/list';

const components = [VList]

const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

// 自动注册组件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default install

css打包压缩

npm i -D rollup-plugin-css-only  clean-css

build/rollup.config.base.js 增加

...
import css from 'rollup-plugin-css-only' // 提取css,压缩能力不行
import CleanCSS from 'clean-css' // 压缩css
import { writeFileSync } from 'fs' // 写文件

export default {
  input: 'src/index.js',
  plugins: [
    ...
    css({ output(style) {
      // 压缩 css 写入 dist/vue-rollup-component-template.css
      writeFileSync('dist/vue-rollup-component-template.css', new CleanCSS().minify(style).styles)
    } }),
    // css: false 将<style>块转换为导入语句,rollup-plugin-css-only可以提取.vue文件中的样式
    vue({ css: false }), 
    ...
  ]
}

rollup-plugin-css-only 支持 css及scss

src/components/list/main.vue

<style>
.v-list {
  width: 300px;
  margin: 0 auto;
}
</style>

<style lang="scss">
.v-list-date {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  .v-list-date-label{
    font-size: 12px;
    color: #999;
  }
  .v-list-date-text{
    font-size: 12px;
    color: #666;
  }
}
</style>

<style scoped>
.v-list-1 {
  background-color: #333;
}
</style>

看起来一切顺利就可以打包发布npm了。

可能发了一堆bug到npm…,还没测试呢。

测试与docs

创建docs

其实就是 vue 的简易模板

vue init webpack-simple docs

安装依赖

cd docs
npm i

docs/src/main.js 引入、注册组件及css

...
import VueRollupComponentTemplate from '../../'
import '../../dist/vue-rollup-component-template.css'

Vue.use(VueRollupComponent)
...

docs/src/app.vue 使用组件

<template>
  <div id="app">
    <h1>vue-rollup-component-template</h1>
    <p>轻松进行组件开发、发布、展示</p>
    <v-list></v-list>
  </div>
</template>

docs/index.html js引入路径改为相对路径(加个点)

<script src="./dist/build.js"></script>

docs/.gitignore 把dist/忽略去掉,github展示页面需要访问dist/

...
dist/ 去掉这个
...

docs目录下只用改这几个地方就可以

准备测试

根目录下

npm i -D cross-env

package.json 添加命令

"scripts": {
    ...
    "dev": "cross-env NODE_ENV=development rollup --config build/rollup.config.es.js --watch"
},

package.json 修改/添加程序入口

...
"main": "dist/vue-rollup-component-template.umd.js",
"module": "dist/vue-rollup-component-template.esm.js",
"unpkg": "dist/vue-rollup-component-template.min.js",
...

开始测试

npm run dev
npm run dev

根目录src下内容修改会重新打包到dist,docs目录监听到dist目录变动会实时响应并刷新页面。

测试过后没问题就可以打包项目,登录npm发布组件了。

发布npm与githubpages

组件与测试是独立的。

  • 根目录下打包的组件可以直接发布npm,不用考虑测试生产环境,从而专注组件开发。
  • docs录下,在提交github之前打包,然后整个项目上传github。

发布npm

新建 .npmignore 文件,添加 npm 忽略文件

docs/
.babelrc

登录npm,然后发布

npm publish

githubpages

新建 .gitignore 文件,添加 git 忽略文件

.DS_Store
node_modules/
.vscode/
npm-debug.log
yarn-error.log

然后上传到github,打开项目设置,github pages的surce项选择docs。

打开分配的地址就可以观光页面了。

项目 github 地址

[转载]原文链接:https://segmentfault.com/a/1190000019744295

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69583.html

文章标题:从0搭建rollup+vue组件模板,轻松发布npm、githubpages

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
回到顶部