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

安装

  1. npm install -g rollup

参考集成jquey && shortid 的library

使用es6 语法

  • 项目结构
  1. ├── index.html
  2. ├── package.json
  3. ├── rollup.config.js
  4. ├── src
  5. │ └── user.js
  6. └── yarn.lock
  • 代码说明
  1. index.html :
  2. 测试构建的library
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <title>Document</title>
  10. </head>
  11. <body>
  13.     <script src="app.js"></script>
  14. </body>
  15. </html>
  16.  rollup.config.js：
  17. rpllup 使用config 方式构建，使用了几个插件（npm commonjs babel uglify）
  18. import commonjs from 'rollup-plugin-commonjs';
  19. import nodeResolve from 'rollup-plugin-node-resolve';
  20. import babel from 'rollup-plugin-babel';
  21. import { uglify } from 'rollup-plugin-uglify';
  22. export default {
  23.     input: 'src/user.js',
  24.     output: [{
  25.             file: 'bundle.js',
  26.             format: 'cjs',
  27.             banner:"// license under apache dalaongrong@qq.com",
  28.         },
  29.         {
  30.             file: 'app.js',
  31.             format: 'umd',
  32.             name:"appdemo",
  33.             banner:"// license under apache dalaongrong@qq.com",
  34.         }
  35.     ],
  36.     plugins: [
  37.         uglify(),
  38.         nodeResolve({
  39.           jsnext: false,
  40.           main: true,
  41.           browser: true
  42.         }),
  43.         babel({
  44.             exclude: 'node_modules/**' // only transpile our source code
  45.         }),
  46.         commonjs({
  47.           // non-CommonJS modules will be ignored, but you can also
  48.           // specifically include/exclude files
  49.           include: 'node_modules/**', // Default: undefined
  50.           exclude: [ 'node_modules/foo/**', 'node_modules/bar/**' ], // Default: undefined
  51.           // these values can also be regular expressions
  52.           // include: /node_modules/
  54.           // search for files other than .js files (must already
  55.           // be transpiled by a previous plugin!)
  56.           extensions: [ '.js', '.coffee' ], // Default: [ '.js' ]
  58.           // if true then uses of `global` won't be dealt with by this plugin
  59.           ignoreGlobal: false, // Default: false
  61.           // if false then skip sourceMap generation for CommonJS modules
  62.           sourceMap: false, // Default: true
  64.           // explicitly specify unresolvable named exports
  65.           // (see below for more details)
  66.           namedExports: { './module.js': ['foo', 'bar' ] }, // Default: undefined
  68.           // sometimes you have to leave require statements
  69.           // unconverted. Pass an array containing the IDs
  70.           // or a `id => boolean` function. Only use this
  71.           // option if you know what you're doing!
  72.           ignore: [ 'conditional-runtime-dependency' ]
  73.         })
  74.       ]
  75. };
  77. package.json:
  78. 引用依赖的包
  79. {
  80. "name": "first",
  81. "version": "1.0.0",
  82. "main": "index.js",
  83. "license": "MIT",
  84. "dependencies": {
  85. "jquery": "^3.3.1",
  86. "shortid": "^2.2.12"
  87. },
  88. "scripts": {
  89. "build": "rollup -c",
  90. "live": "live-server"
  91. },
  92. "devDependencies": {
  93. "babel-cli": "^6.26.0",
  94. "babel-plugin-external-helpers": "^6.22.0",
  95. "babel-plugin-transform-object-rest-spread": "^6.26.0",
  96. "babel-preset-env": "^1.7.0",
  97. "live-server": "^1.2.0",
  98. "rollup-plugin-babel": "^3.0.7",
  99. "rollup-plugin-commonjs": "^9.1.4",
  100. "rollup-plugin-node-resolve": "^3.3.0",
  101. "rollup-plugin-uglify": "^4.0.0"
  102. }
  103. }
  105. src/user.js:
  106. 业务处理代码
  107. import shortid from "shortid"
  108. import jq from "jquery"
  109. const user ={
  110.     name:"dalong",
  111.     age:343
  112. }
  113. export default {
  114.     id:shortid.generate(),
  115.     version:"appv1",
  116.     ...user,
  117.     $:jq
  118. }
  119. src/.babelrc：
  120. babel 编译配置
  121. {
  122.   "presets": [
  123.     ["env", {
  124.       "modules": false
  125.     }]
  126.   ],
  127.   "plugins": ["external-helpers", "transform-object-rest-spread"]
  128. }

构建&&运行

  • 构建
  1. yarn build
  • 运行
  1. 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. Hello 2019 Solution

    A. Gennady and a Card Game 签到. #include <bits/stdc++.h> using namespace std; ], t[]; bool solv ...

  2. 《Java从入门到放弃》JavaSE入门篇：变量

    变量是什么玩意呢? 变量,顾名思义就是能变化的量 - - 好吧,举个栗子. 图片上的各种餐具,就是变量,因为同一个盘子可以在不同的时间装不同的菜,在这一桌可以装土豆肉丝,在下一桌可以装清炒黄瓜(当然, ...

  3. cocos2dx 3.x 蒙板 遮罩 点击圆功能

    //注册触摸 EventListenerTouchOneByOne *listener = EventListenerTouchOneByOne::create(); listener->onT ...

  4. Eclipse中如何查看使用的JDK版本

    有两种方法可以查看eclipse中jdk的版本: 第一种方法: 点击开始--运行--输入cmd--点击确定--在cmd命令行窗口中输入java -version,就可以显示出当前在使用的jdk的版本号 ...

  5. js 变量、函数提升 与js的预编译有关

    参考网址:http://www.codesec.net/view/178491.html 先简单理解下作用域的概念,方便对变量与函数提升的概念的理解 function foo() { var x = ...

  6. SqlBulkCopy 批量导入数据 转换表字段类型

    在使用SqlBulkCopy导入数据时,要有一个跟数据库里面同样的DataTable 要赋值表名 要求每个列跟数据库中列同名,并且列的类型要赋值跟数据库中列的类型对应的NET类型 要求数据库中为Nul ...

  7. PHP-----------HTTP请求的第三方接口

    开发中常常遇到接口请求这个功能,后台也不例外,因为遇到了,所以写一篇. 前段时间做商城后台时,需要用到第三方物流接口查询物流信息. post: /**** * @param $url * @param ...

  8. 深入理解javascript之typeof和instanceof

    1.https://blog.csdn.net/mevicky/article/details/50353881 (深入理解javascript之typeof和instanceof)

  9. Java HashMap的工作原理

    面试的时候经常会遇见诸如:”java中的HashMap是怎么工作的”.”HashMap的get和put内部的工作原理”这样的问题. 本文将用一个简单的例子来解释下HashMap内部的工作原理. 首先我 ...

  10. 识别TLS加密恶意流量

    利用背景流量数据(contexual flow data)识别TLS加密恶意流量 识别出加密流量中潜藏的安全威胁具有很大挑战,现已存在一些检测方法利用数据流的元数据来进行检测,包括包长度和到达间隔时间 ...