rollup 是一个不错的javascript 模块打包器，一般我们用来构建library

安装

npm install -g rollup

参考集成jquey && shortid 的library

使用es6 语法

  • 项目结构
├── index.html

├── package.json

├── rollup.config.js

├── src

│ └── user.js

└── yarn.lock
  • 代码说明
index.html :

测试构建的library

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script src="app.js"></script>

</body>

</html>

 rollup.config.js：

rpllup 使用config 方式构建，使用了几个插件（npm commonjs babel uglify）

import commonjs from 'rollup-plugin-commonjs';

import nodeResolve from 'rollup-plugin-node-resolve';

import babel from 'rollup-plugin-babel';

import { uglify } from 'rollup-plugin-uglify';

export default {

    input: 'src/user.js',

    output: [{

            file: 'bundle.js',

            format: 'cjs',

            banner:"// license under apache dalaongrong@qq.com",

        },

        {

            file: 'app.js',

            format: 'umd',

            name:"appdemo",

            banner:"// license under apache dalaongrong@qq.com",

        }

    ],

    plugins: [

        uglify(),

        nodeResolve({

          jsnext: false,

          main: true,

          browser: true

        }),

        babel({

            exclude: 'node_modules/**' // only transpile our source code

        }),

        commonjs({

          // non-CommonJS modules will be ignored, but you can also

          // specifically include/exclude files

          include: 'node_modules/**', // Default: undefined

          exclude: [ 'node_modules/foo/**', 'node_modules/bar/**' ], // Default: undefined

          // these values can also be regular expressions

          // include: /node_modules/

          // search for files other than .js files (must already

          // be transpiled by a previous plugin!)

          extensions: [ '.js', '.coffee' ], // Default: [ '.js' ]

          // if true then uses of `global` won't be dealt with by this plugin

          ignoreGlobal: false, // Default: false

          // if false then skip sourceMap generation for CommonJS modules

          sourceMap: false, // Default: true

          // explicitly specify unresolvable named exports

          // (see below for more details)

          namedExports: { './module.js': ['foo', 'bar' ] }, // Default: undefined

          // sometimes you have to leave require statements

          // unconverted. Pass an array containing the IDs

          // or a `id => boolean` function. Only use this

          // option if you know what you're doing!

          ignore: [ 'conditional-runtime-dependency' ]

        })

      ]

};

package.json:

引用依赖的包

{

"name": "first",

"version": "1.0.0",

"main": "index.js",

"license": "MIT",

"dependencies": {

"jquery": "^3.3.1",

"shortid": "^2.2.12"

},

"scripts": {

"build": "rollup -c",

"live": "live-server"

},

"devDependencies": {

"babel-cli": "^6.26.0",

"babel-plugin-external-helpers": "^6.22.0",

"babel-plugin-transform-object-rest-spread": "^6.26.0",

"babel-preset-env": "^1.7.0",

"live-server": "^1.2.0",

"rollup-plugin-babel": "^3.0.7",

"rollup-plugin-commonjs": "^9.1.4",

"rollup-plugin-node-resolve": "^3.3.0",

"rollup-plugin-uglify": "^4.0.0"

}

}

src/user.js:

业务处理代码

import shortid from "shortid"

import jq from "jquery"

const user ={

    name:"dalong",

    age:343

}

export default {

    id:shortid.generate(),

    version:"appv1",

    ...user,

    $:jq

}

src/.babelrc：

babel 编译配置

{

  "presets": [

    ["env", {

      "modules": false

    }]

  ],

  "plugins": ["external-helpers", "transform-object-rest-spread"]

}

构建&&运行

  • 构建
yarn build
  • 运行
yarn live
  • 效果

参考资料

https://rollupjs.org/guide/en
https://github.com/rongfengliang/rollup-babel-demolibrary

 
 
 
 

使用rollup 开发专业js library的更多相关文章

  1. 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结

    打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类 ...

  2. 使用blessed-contrib 开发专业的终端dashboard

    blessed-contrib 是blessed 的一个扩展包,以前有说过blessed(一个方便的开发cli 的工具) 我们使用blessed-contrib可以开发专业的终端dashboard 功 ...

  3. rollup 开发环境搭建

    rollup 开发环境搭建 初始化项目使用lerna管理项目 使用npm init 初始化项目 npm init -y 安装lerna并初始化项目 npm install lerna --save-d ...

  4. VS轻松开发Node.js应用

    PTVS开发团队又开发出一款可以在VS里编写Node.js应用程序的插件--NTVS(Node.js Tools for Visual Studio),开发者可以在VS里轻松开发Node.js应用. ...

  5. 在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure

    [题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...

  6. 在Visual Studio上开发Node.js程序

    [题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studio上的插件以方便开发.结果还真找到了一个,来自微软的Node.js Tools for Visual Studio ...

  7. CDH5X 安装oozie报错To enable Oozie web console install the Ext JS library.

    最近在CDH5.X 安装oozie 服务,服务安装完毕,访问oozie server ui,报如下错误: 页面提示: Oozie web console is disabled.To enable O ...

  8. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  9. 【转】使用VS开发 Node.js指南

    参考:https://www.visualstudio.com/features/node-js-vs 这篇文章主要介绍了使用VS开发 Node.js的方法,主要是使用NTVS(Node.js Too ...

随机推荐

  1. uva 1456

    这题说的是 给了 n 个 点 然后每个点 都有 相应的概率,你要将这n个点划分成w个集合使得 下面定义的这种算法 得到的 值最小 n1 是集合一的 个数  是 集合一内的每个点的概率和, 下面是分成两 ...

  2. AVAudioFoundation(5)：音视频导出

    本文转自:AVAudioFoundation(5):音视频导出 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 要读写音视频数 ...

  3. 前端学习笔记之HTTP协议

    阅读目录 一 HTTP协议简介 二 HTTP协议之请求Request 三 HTTP协议之响应Response 四 HTTP协议完整工作流程 五 HTTP协议关键性总结 六 自定义套接字分析HTTP协议 ...

  4. 前端学习笔记之CSS介绍

    阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是H ...

  5. 自动化运维工具SaltStack安装配置

    SaltStack是一种全新的基础设置管理方式,部署轻松,在几分钟内可运作起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯.通过部署SaltStack环境,我们可以在成千上万台服务 ...

  6. 20145219《网络对抗》Web基础

    20145219<网络对抗>Web基础 基础问题回答 什么是表单? HTML表单用于收集用户输入,用<form>元素定义,包含不同类型的 input元素.复选框.单选按钮.提交 ...

  7. 20145311实验四 "Android开发基础"

    20145311实验四 "Android开发基础" 程序设计过程 实验内容 ·安装Android Studio·运行安卓AVD模拟器·使用安卓运行出虚拟手机并显示HelloWorl ...

  8. ubuntu16.04+七彩虹GTX1060的NVIDIA驱动+Cuda8.0+cudnn5.1+tensorflow+keras搭建深度学习环境【学习笔记】【原创】

    平台信息:PC:ubuntu16.04.i5.七彩虹GTX1060显卡 作者:庄泽彬(欢迎转载,请注明作者) 说明:参考了网上的一堆的资料搭建了深度学习的开发环境,下班在宿舍折腾了好几个晚上才搞定,写 ...

  9. 《Effective Java 2nd》第2章 创建和销毁对象

    目录 第1条:考虑使用静态工厂方法代替构造器 第2条:遇到多个构造器参数时考虑用构建器 第3条:用私有构造器或者枚举类型强化Singleton属性 第4条:通过私有构造器强化不可实例化的能力 第5条: ...

  10. NOIP 2018 兔纸旅游记

    今年是第一次参加tg呢... Day0    早上出发去中旅坐大巴,走有 lz 特色的OI比赛道路. 车上谈笑风生,看 jw 的 GDOI 的小本本. 到动车站取票入站,看 lmh 和 zn 的爱恨情 ...