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. Linux 基础 —— Linux 进程的管理与监控

    这篇文章主要讲 Linux 中进程的概念和进程的管理工具.原文:http://liaoph.com/inux-process-management/ 进程的概念 什么是进程 进程(Process)是计 ...

  2. 478. Generate Random Point in a Circle

    1. 问题 给定一个圆的半径和圆心坐标,生成圆内点的坐标. 2. 思路 简单说 (1)在圆内随机取点不好做,但是如果画出这个圆的外接正方形,在正方形里面采样就好做了. (2)取两个random确定正方 ...

  3. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  4. this指向 - 开端

    /* 这个主题 主要是为了论述 js 中一个最烦人的问题 --> this 的指向问题 其实,这个 this 到底指向什么,指向谁,查了好多资料.书籍.官文,也没有给出明确的一个结论, 也学这也 ...

  5. Java实现文本创建、删除、编辑内容

    Java实现文本创建.删除.编辑内容 1,创建文本代码: //创建文件并追加内容 public static void writeContentToTxt(StringBuffer Content,F ...

  6. 20145204《Java程序设计》第3周学习总结

    20145204<Java程序设计>第3周学习总结 教材学习内容总结 对象和类. Java有基本类型和类类型这两个类型系统.本章主要介绍类类型.定义类时用关键词class,利用类建立对象实 ...

  7. pip安装tensorflow-gpu好慢怎么办

    答:为pip换源,如换成清华源 cat ~/.pip/pip.conf(没有此文件,自行创建即可,然后加入以下内容) [global]index-url = https://pypi.tuna.tsi ...

  8. Java8 Lambda

    Demo: package com.qhong; public class Main { public static void main(String[] args) throws Exception ...

  9. HBuilder 获取通话记录 （Android）

    代码: Date.prototype.Format = function (fmt) { var o = { , //月份 "d+": this.getDate(), //日 == ...

  10. SprigBoot核心技术

    启动原理 运行流程 自动配置原理 一.启动原理 SpringApplication.run(主程序类)– new SpringApplication(主程序类)• 判断是否web应用• 加载并保存所有 ...