技术 | Webpack 迁移到 Rollup

最近React悄悄把构建工具从Webpack换成了Rollup，大家可以关注这个PR：github.com/facebook/re…。

The current build process for React (using Gulp, Grunt and Browserify) is cumbersome and overly-complicated. It doesn't allow us to unify our external open-source and our internal Facebook processes very well. This PR introduced an entirely new system that replaces the old build system.

We now leverage the creation of flat bundles, that force users to work with a single point of entry. This allows us to make better optimizations, improve our bundle size, improve the DEV/PROD experience and allows us to control how people use the APIs offered by React and the various different React renderers.

足见前端社区变化之快，是不是我们也要开始尝尝鲜，Rollup到底有些什么魅力？关于Rollup粗浅的配置，有兴趣的朋友可以阅读以下《技术 | 玩玩rollup与flow，感受一下“大自然”的魅力》。算是跟随潮流吧，我把一个SDK工程的构建脚本也换成了Rollup，来此给大家分享一下，如果你做的项目是很纯粹的JavaScript项目，那么Rollup比Webpack要有优势的多，当然了，如果你还需要配合其他的资源，可能现在这个阶段Rollup的plugin肯定没有Webpack的loader和plugin多，而且还需要配合一些其他的东西。

学习如下的知识，默认你对Node.js的命令行以及NPM非常熟悉，关于安装，请参考 github.com/rollup/roll… ，整篇文章阅读大概需要10分钟左右。

正常情况下，关于构建脚本一般都喜欢放置在build目录中，Rollup项目也不另外，为了方便书写构建脚本，这里我创建了三个文件，分别是：build.js，config.js，alias.js，为了能让在develop环境中可以watch，你还需要安装另外的一个工具：rollup-watch，至于区分环境，你可以用Node.js来写，比如：

let isWatch = false;
if (process.argv[3]) {
    isWatch = process.argv[3] === '--watch' || process.argv[3] === '-w'
}
if (process.argv[2]){    
    build(process.argv[2]);
}

当你在命令行中传入第三个参数为--watch或者-w，这个时候就能把你来控制是否watch的变量设置为true，在你的脚本中，需要使用isWatch来控制是否watch。

function rollupOnWatch(config) {    
   const watcher = watch(rollup, config);    
   watcher.on('event', function(event){        
       switch (event.code) {            
           case 'STARTING':                
               console.log('checking rollup-watch version...');                
               break;            
           case 'BUILD_START':                
               console.log('bundling...');                
               break;            
           case 'BUILD_END':                
               console.log('bundled in ' + path.relative(process.cwd(), config.dest) + ' (' + event.duration + 'ms)');                
               console.log('Watching for changes...' );                
               break;            
           case 'ERROR':                
               console.error('ERROR: ', event.error);                
               break;            
           default:                
               console.error('unknown event', event);
        }
    });
}

有了这段脚本，你就可以在develop环境中watch了。

比较顺利的情况下，在你的源代码中，应该用别名来缩短Path，这个时候你可以用rollup-plugin-alias这个插件，非常简单的你只需要写一点点脚本即可：

const path = require('path');
function absolute (str) {    
    return path.resolve(__dirname, '..', str)
}
module.exports = {
    framework: absolute('src/frameworks'),
    runtime: absolute('src/runtime'),
    vue: absolute('src/frameworks/vue'),
    bridge: absolute('bridge')
};

在config.js文件中正确书写你的配置对象，这个对象是给rollup用来构建你的源代码的，参数比Webpack要少了很多，相信你阅读官网（rollupjs.org/ ）之后，就能很快的用起来。

const configs = {  
    'framework':{
         moduleName: 'xxxx',
         entry: absolute('src/framework.js'),
         plugins: [          
            resolve({
              jsnext: true,
              main: true
            }),          
            babel()
         ],
         format: 'umd',
         dest: absolute('dist/framework.js'),
         banner: 'var global = (function(){ return this;})();\nglobal.xxxx = "' + pkg.version +'";',
         alias:alias(Object.assign({}, require('./alias'), opts.alias)),
         env: env
     }
 }

entry 源代码的入口
moduleName 这个参数只有设置了umd的时候才需要设置
plugins 顾名思义，这里是来放插件的
format 设置打包的模式，比如umd，cjs等
dest 输出
banner 可以在输出文件的头部写入一段你想写的
alias 别名
env 环境变量，比如process.env等

最后一步，在你的package.json文件中的scripts配置你的构建命令，比如：

"dev": "node build/build.js framework --watch"

在终端输入：npm run dev，来查看吧，最后祝大家玩的愉快。