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. 24UDP通信

    使用Qt提供的QUdpSocket进行UDP通信.在UDP方式下,客户端并不与服务器建立连接,它只负责调用发送函数向服务器发送数据.类似的服务器也不从客户端接收连接,只负责调用接收函数,等待来自客户端 ...

  2. hdu6158 The Designer

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6158 题目: The Designer Time Limit: 8000/4000 MS (J ...

  3. bzoj1601 / P1550 [USACO08OCT]打井Watering Hole（堆优化prim）

    P1550 [USACO08OCT]打井Watering Hole   对于自己建水库的情况,新建一个虚拟结点,和其他点的边权即为自建水库的费用 这样问题就转化为一个裸最小生成树问题了. 这里用堆优化 ...

  4. Python3.x：os.mkdir与 os.makedirs（创建目录方法）区别

    Python3.x:os.mkdir与 os.makedirs区别 1,os.mkdir mkdir( path [,mode] ) 说明: 创建一个目录,可以是相对或者绝对路径,mode的默认模式是 ...

  5. Linux内核分析08

    进程的切换和系统的一般执行过程 一,进程切换的关键代码switch_to分析 进程调度的时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时 ...

  6. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  7. VC++使用HOOK API 屏蔽PrintScreen键截屏以及QQ和微信默认热键截屏

    转载:http://blog.csdn.net/easysec/article/details/8833457 转载:http://www.vckbase.com/module/articleCont ...

  8. SpringBoot Boot内嵌Tomcat

    Spring Boot: SpringBoot-start-web 里面依赖的环境中 如果是外部的Tomcat 容器,可以通过修改config进行配置 内嵌的呢? 如何定制和修改Servlet容器的相 ...

  9. appium装上开始干嘛

    先写appium的启动参数啊 比如调试序列号,设备的系统版本. 什么系统. app的包名,这些代码百度上都有的,针对修改下就行.

  10. JDK环境变化配置

    JDK环境变化配置 第一"JAVA_HOME" JAVA_HOME的内容是jdk安装目录.如小编安装的位置:D: \Java\jdk1.7.0_60,并且后边不带分号 第二, CL ...