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. pyDay17

    1.用filter求素数. 埃拉托色尼筛选法. #!/usr/bin/env python3 # -*- coding: utf-8 -*- def _odd_iter(): n = 1 while ...

  2. SQL学习笔记四(补充-1)之MySQL单表查询

    阅读目录 一 单表查询的语法 二 关键字的执行优先级(重点) 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER BY 八 限制查询的记录 ...

  3. poj2262 Goldbach's Conjecture

    poj2262 Goldbach's Conjecture 用欧拉筛把素数筛出来,再枚举一下. #include<iostream> #include<cstdio> #inc ...

  4. 20145106 java实验一

    因为之前就使用过eclipse所以本次试验开始阶段并没有遇到什么大问题,按照步骤做下来. 我的实验序号根据算法是第二个四则运算的实验. 加法: package ljp; public class he ...

  5. Think in Java笔记——Java与对象

    最近在重新学习Java,在阅读Java的经典著作——Java编程思想,因此每天记录阅读的心得. 当听到Java这个词时,大家一般想到的是面向对象,确实Java相对于C/C++这两门语言来说,Java最 ...

  6. 关于函数strtok和strtok_r的使用要点和实现原理（一）【转】

    本文转载自:http://astute11.blog.51cto.com/4404646/1334198 strtok函数的使用是一个老生常谈的问题了.该函数的作用很大,争议也很大.以下的表述可能与一 ...

  7. Java回顾之多线程同步

    在这篇文章里,我们关注线程同步的话题.这是比多线程更复杂,稍不留意,我们就会“掉到坑里”,而且和单线程程序不同,多线程的错误是否每次都出现,也是不固定的,这给调试也带来了很大的挑战. 在这篇文章里,我 ...

  8. Tensorflow一些常用基本概念与函数（三）

    摘要:本系列主要对tf的一些常用概念与方法进行描述.本文主要针对tensorflow的数据IO.图的运行等相关函数进行讲解.为‘Tensorflow一些常用基本概念与函数’系列之三. 1.序言 本文所 ...

  9. Spring 及 SpringMVC的web.xml配置详解

    出处http://blog.csdn.net/u010796790 1.spring 框架解决字符串编码问题:过滤器 CharacterEncodingFilter(filter-name) 2.在w ...

  10. 2-14-2 MySQL数据类型

    MySQL数据类型: 对数据进行分类,针对不同分类进行不同的处理. 1. 使系统能够根据数据类型来操作数据. 2. 预防数据运算时出错. 3. 更有效的利用空间. 数据分类,可以使用最少的存储,来存放 ...