Rollup.js 实践

音乐分享：

 B.o.B Ft. Marko Penn - 《Roll up》

——————————————————————————————————————————————————————————————

项目截图：

项目目录：

目录介绍：

|---dist ------------------------最后文件目录
|----└──i------------------------图片目录
|----└──j------------------------最后Rollup.js的生成的js目录
|----└──index.html---------------html文件
|---node_modules-----------------node依赖目录
|---package.json-----------------包描述文件及开发者信息
|---rollup.config.js-—-----------Rollup.js的配置文件
|---src--------------------------开发文件
|----└──s------------------------sass目录
|----└──j------------------------开发js目录

流程步骤:

1、在CMD进入你所要打包文件根目录，在CMD里输入:

npm init -y

栗子截图:

2、在CMD输入安装Rollup.js插件

插件介绍：

rollup(本尊)：rollup

babel (ES6转ES5) : rollup-plugin-babel、babel-preset-es2015-rollup、babel-preset-stage-0

commonjs(common的js模块)：rollup-plugin-commonjs

sass(css预编译):rollup-plugin-sass、node-sass

js压缩:rollup-plugin-uglify

sever(本地服务器):rollup-plugin-serve

热更新(改代码不手动刷新浏览器)：livereload、rollup-plugin-livereload

实时监听(监听文件更改)：rollup-watch

npm install babel-preset-es2015-rollup
            babel-preset-stage-0
            node-sass
            rollup
            rollup-plugin-babel
            rollup-plugin-commonjs
            rollup-plugin-livereload
            rollup-plugin-sass
            rollup-plugin-serve
            rollup-plugin-uglify
            rollup-watch
            livereload      ---save-dev

栗子截图：

生成的package.json文件：

{
  "name": "rollup-demo",
  "version": "1.0.0",
  "description": "",
  "main": "rollup.config.js",
  "scripts": {
    "dev": "rollup -c --watch",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-preset-stage-0": "^6.22.0",
    "node-sass": "^4.5.0",
    "rollup": "^0.41.4",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^7.0.0",
    "rollup-plugin-livereload": "^0.4.0",
    "rollup-plugin-sass": "^0.4.9",
    "rollup-plugin-serve": "^0.1.0",
    "rollup-plugin-uglify": "^1.0.1",
    "rollup-watch": "^3.2.2"
  },
  "devDependencies": {
    "livereload": "^0.6.0"
  }
}

 3、在根目录建rollup.config.js文件并编写:

'use strict';
	
import babel from 'rollup-plugin-babel';	      //ES6转ES5插件;
import sass from 'rollup-plugin-sass';            //sass插件;
import commonjs from "rollup-plugin-commonjs";    //将CommonJS模块转换成ES6，防止他们在Rollup中失效;
import uglify from 'rollup-plugin-uglify';        //js压缩;
import serve from 'rollup-plugin-serve';          //serve服务;
import livereload from 'rollup-plugin-livereload';//热更新;

export default {
  entry: 'src/j/index.js',   // 入口文件;
  format: 'iife',			 // 打包输入格式分别为:amd,cjs,es,iife,umd;(https://github.com/rollup/rollup/wiki/JavaScript-API#format); 
  dest: 'dist/j/bundle.js',  // 输出文件;
  sourceMap: 'inline',		 // 调试sourceMap;
  plugins: [ 
    commonjs(),           //将CommonJS模块转换成ES6;
    sass({
    	output: './dist/c/bundle.css'  //设置sass编译完成路径;
    }),
    babel({
          babelrc: false,                        //不设置.babelrc文件;
          exclude: 'node_modules/**',            //排除node_modules文件夹;
          presets: ['es2015-rollup', 'stage-0'], //转ES5的插件;
          plugins: ['transform-class-properties']//转换静态类属性以及属性声明的属性初始化语法
    }),
    uglify(),                        //js压缩;
  	serve({
  	 contentBase: 'dist/',   //启动文件夹;
  	  host: 'localhost',      //设置服务器;
  	  port: 10001			  //端口号;
  	}),  
    livereload({
      watch: 'dist/'     //监听文件夹;
    })
  ]
  
};

4、在index.js 入口js文件 引入需要打包文件：

'use strict';

//启动server;
document.write('<script src="http://' 
                + (location.host || 'localhost').split(':')[0] +
                ':5729/livereload.js?snipver=1"></' + 'script>');

import "../s/index.scss"; //sass文件;
import $ from "./jquery.min.js"; //js文件;
import * as sos from "./c.js"; //js文件;

$(function(){
    sos.sos('test'); //调用c.js的方法;

栗子截图：

5、在编写rollup.config.js文件 npm script:

"dev": "rollup -c --watch",

 栗子截图：

6、在index.html 引入最后的css/js：

<link rel="stylesheet" type="text/css" href="c/bundle.css">
<script type="text/javascript" src="j/bundle.js"></script>

 栗子截图：

7、以上完成之后CMD输入 npm run dev 启动服务：

npm run dev

栗子截图：

浏览器打http://localhost:10001/ 就能查看

后记：

其实我个人还挺喜欢Roullp.js的

配置简单，打包js没有啥多余代码(没错 就说你呢 webpack)

还有独立css文件也能实时热更新

但是目前的插件还是太少了

参考资料:

rollup.js     :  官网

小爝　　     :  《使用rollup和npm scripts构建完整javascript项目》

Showonne  :  《[译]教程：如何使用Rollup打包JavaScript》

Showonne  :  [译]教程：如何使用Rollup打包样式文件并添加LiveReload

见见           :  Rollup 试炼之路

VaJoy Larn :  《冗余代码都走开——前端模块打包利器 Rollup.js 入门》