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 入门》