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. 2018 Multi-University Training Contest 5 Solution

    A - Always Online Unsolved. B - Beautiful Now Solved. 题意: 给出一个n, k  每次可以将n这个数字上的某两位交换,最多交换k次,求交换后的最大 ...

  2. uva10817 dijkstra

    大白书P330 #include <iostream> #include <cstdio> #include <algorithm> #include <st ...

  3. RedHot 不能联网 ifconfig命令只显示lo 不显示eth0的解决方法！

    1.修改eth0 具体步骤如下 vi /etc/sysconfig/network-scripts/ifcfg-eth0, i,进入insert编辑模式,具体参数设置如下: DEVICE=eth0 B ...

  4. 2017-2018-2 20165207 实验三《敏捷开发与XP实践》实验报告

    java 实验三 实验报告 实验内容 代码规范 不规范的代码可能妨碍阅读,在粘贴下来老师在云班课中设置的提交点一的代码之后,我首先使用了IDEA中Code选项卡的Reformat Code功能规范代码 ...

  5. deepin中crossover或playonlinux装完office后word无法输入中文的问题

    原因:office安装是自带了一个微软输入法 解决:装offce时进行自定义安装,在office共享功能里,把输入法去掉. 参考: https://jingyan.baidu.com/article/ ...

  6. HDU1087

    /*记忆化dfs+dp,因为每次最多走k步,所以上下左右的方向有所扩展, dp[i][j]存的是从dp[i][j]出发能吃的最大个数*/ #include<stdio.h> #includ ...

  7. 关于Drupal中使用hook_schema建立数据库报错PDOException: SQLSTATE[42000]的解决办法

    报错信息如下:PDOException: SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too l ...

  8. #include <ntifs.h>出现PEPROCESS redefinition问题处理

    转载:http://blog.csdn.net/ytfrdfiw/article/details/23334297 如果在自己的程序中,即包含ntddk.h和ntifs.h的时候,编译的时候会出现如下 ...

  9. 记我一年的OI之路

    upd:感觉没必要设密码了吧,把这个发出来还能显得自己弱颓一些.. 自从我刚刚接触c++,到现在已经快一年了吧,这一年中,我学到了很多,失去了很多,也得到了很多. 开通了blog,那就从现在,就是一个 ...

  10. 简单实现Ubuntu16.04 + caffe2 + CUDA9.0 + cuDNN8.0

    在Ubuntu16.04 CUDA9.0 cuDNN8.0的环境下安装caffe2 本博客比较简单,cuda9.0 cudnn8.0部分请看上一篇博客,其中详细讲了: 如何安装驱动 安装cuda 安装 ...