赵工的个人空间

常用Web前端工具

一、Node.js：

Node.js是基于Chrome V8引擎构建的JavaScript运行环境，是运行npm、Brower等其他Web前端工具的基础。
安装时，勾选npm package manager选项，还需要勾选Add to Path选项。安装完成，使用命令nide  --help可以获取帮助信息。编写一个应用：
var http=require('http')
http.createServer(function(req,res){
res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<h1>hello Node.js</h1>\n');
}).listen(8081);
console.log('Server running at port 8081');
打开Windows控制台，输入上述文件名，运行。这个文件是一个服务端应用，监听8081端口，向用户返回一段HTML内容。打开Web浏览器，输入http://localhost:8081/访问该服务，可以查看服务端返回的数据。

二、Npm包管理工具：

Node包管理工具Npm（Node Package Manager）在互联网中建立了一个代码仓库，帮助开发者查找、共享和复用JavaScript库。

1. Npm安装：

默认情况下Npm是随着Node一起安装的，可以通过命令npm help查看是否安装。如果出现了npm包管理工具的帮助信息，说明已经成功安装。否则需要手动安装。
Npm源码地址：https://github.com/npm/npm。可以使用git获取：
git cline --recursive git://github.com/issace/npm.git
或者在浏览器中打开Npm源码主页面，单击Github页面中的Download ZIP链接进行下载。
下一步，打开Windows控制台，进入源码目录，输入命令安装：
node cli.js install npm -gt
命令执行完毕即可成功安装Npm包管理工具。

2. 初始化项目：

使用Npm初始化项目：
npm init
输入该目录后会有一个向导，提示输入项目的名称、版本等信息，执行完毕会在工作路径下生成一个package.json文件。可以对该文件进行修改，添加dependencies属性，表示项目的依赖模块。然后在package.json文件所在目录执行npm install命令进行模块安装，命令执行后会生成node_modules目录，该目录下为项目依赖的所有模块文件。

3. 安装Node模块：

npm install moduleName
安装完成后会产生一个node_modules目录，目录下为项目所依赖的所有模块文件。安装可分为全局模式和局部模式，默认情况下为局部模式，模块会被安装到当前应用程序node_modules目录下。可以使用-g参数进行全局安装，在全局模式下，模块会被安装到Node.js安装路径的node_modules目录下。全局安装命令为：
npm install -g express
当一个模块可以以控制台命令的形式运行时，尽量使用全局安装，这样在任何工作路径下都可以执行该命令，否则只能在安装了该模块的应用程序路径下运行该命令。
在应用程序中，直接通过require()的方式是没有办法调用全局安装模块的，对于项目依赖的库文件来说，需要使用局部安装。
已日志的形式输入安装进度的命令：
npm install -gd express
还可以使用@符号指定模块的版本：
npm install -gd express@3.4.7
有时候使用npm安装模块时，速度会非常慢，可以使用--registry参数改变镜像服务器地址，使用国内的镜像服务器速度会快很多，如：
npm install -gd express --registry=http://registry.npm.taobao.org
当项目中有package.json文件时，可以使用--save参数将依赖写到package.json文件中：
npm install validator --save
安装成功后，会在package.json文件中写入依赖项。

4. 卸载Node模块：

npm uninstall express
如果项目中有package.json文件，卸载后会将依赖从该文件中移除。卸载完成后，可以使用命令查看当前安装模块：
npm ls
该命令会显示所有安装的模块，包括安装模块所依赖的其他模块。
除此之外，还可以使用如下命令查看当前模块安装路径：
npm root
查看全集包安装路径的命令：
npm root -g
可以使用npm help查看npm帮助信息。

三、Bower管理工具：

Bower是twitter推出的一款开源的包管理工具。当项目中需要某些库文件时，可以通过Bower工具来获取，它能够自动解析库文件之间的依赖关系，将依赖的其他库文件一并获取，以解决库版本的冲突问题。

1. 安装Bower：

使用Npm包管理器可以安装Bower，需要采用全局安装方式：
npm install -gd bower
Bower从远程Git仓库获取库文件，所以还需要安装Git。可以从官网获取安装包，安装完成后需要将安装目录添加到环境变量中，确保在控制台中可以使用git命令，验证安装：
git --help
如果控制台中输出Git的帮助信息就说明安装成功，然后就可以使用Bower了。

2. 初始化Bower：

进入项目根目录中，输入命令进行初始化：
bower init
输入命令后，会有一个向导提示设置项目的相关信息，如名称、描述、协议等，每一步都提供了默认的内容，如果不需要改动，按Enter键确认即可。命令执行完毕后，会在项目根目录下生成一个bower.json文件。
可以在bower.json文件中进行项目的依赖管理，对文件进行修改，加入dependencies项，指定项目所依赖的库文件，然后执行bower install命令，Bower包管理工具会将所有依赖的库文件通过Git复制到项目中，生成一个bower_components目录，该目录会以库名称生成子目录，不同的库文件存放在对应名称的子目录中。

3. 使用Bower安装包：

安装Express工具包时，只需要执行如下命令：
bower install express
如果将包的依赖信息写入到bower.json文件中，需要使用--save参数：
bower install express --save
该命令执行完毕后会安装最近版本的Express工具包，如果需要对包的版本进行控制，只需要在包名称后使用#号加上版本号：
bower install express#3.0.0 --save

4. 查看包信息：

当想查找jQuery都有哪些版本，可以输入命令：
bower info jquery
在控制台中会输出jQuery的bower.json信息以及所有可用的版本信息。可以从中选择合适的版本，然后将对应版本的包安装到项目中。

5. 更新包的版本：

需要对包的版本进行修改，只需要修改bower.json文件中的依赖包版本。然后执行：
bower update
Bower工具就会对版本进行更新。

6. 查找包：

如果想要安装bootstrap的某个插件，但是记不住名字，可以在控制台中输入命令：
bower search bootstrap
Bower工具会在控制台中输出bootstrap关键字相关的包和地址。

7. 卸载包：

当确定项目中已经不需要一些包时，可以使用uninstall命令卸载：
bower uninstall jquery

四、Gulp项目管理工具：

Gulp是一个基于Node.js的构建工具，可以用来进行项目管理，如CSS压缩、LESS编译等。Gulp拥有大量插件，用来执行JSHint、编译CoffeeScript等。

1. Gulp的安装：

需要使用Npm包管理器全局安装Gulp：
npm install -gd gulp
接着需要进入项目的根目录，将Gulp作为项目的依赖安装：
npm install -d gulp
接着可以在项目的根目录下新建一个gulpfile.js文件，增加如下内容：
var gulp=require('gulp');
gulp.task('default', function(){
  console.log("default task......");
});
代码中调用Gulp对象的task方法创建了一个任务，任务名为default，在该任务中输出一段信息，接着可以执行gulp命令运行该任务。如果未指定任务名称，gulp将会运行名称为default的任务。

2. 利用JSHint验证JavaScript代码：

JSHint是JavaScript代码验证工具，可以检查JavaScript代码中存在的问题并提供相关的改进意见。进入JSHint首页jshint.com，在网页编辑框粘贴JavaScript代码，网站会自动检查代码中存在的问题并给出改进意见。使用Gulp的JSHint插件方式检查代码更简便。
JSHint插件安装需要借助Npm包管理器。进入项目根目录，控制台输入命令：
npm install -d jsint gulp-jshint --save-dev
安装完成后，会在node_modules目录下生成gulp-jshint和jshint目录，jshint目录下为JSHint库文件，gulp-jshint目录下为JSHint的Gulp插件。
在gulpfile.js文件，增加如下内容来验证JavaScript文件中是否存在问题代码：
var jshint=require('gulp-jshint');
var gulp=require('gulp');
gulp.task('jshint', function(){
  return gulp.src('./js/*.js').pipe(jshint()).pipe(jshint.reporter('default'));
});
Gulp项目管理工具简洁易用，它提供了较少的API方法，只需要掌握4个方法，task()、src()、pipe()和desc()。上述代码中，使用gulp.task()方法定义一个任务，名称jshint，在该任务中对JavaScript文件中的代码进行验证，由于需要用到JSHint插件，var jshint=require('gulp-jshint');代码加载。然后可调用jshint对象的JSHint插件提供的方法，如jshint.reporter('default')。
代码中用到了gulp.src()方法，该方法用于匹配符合所提供的匹配模式或者匹配模式数组的文件，然后就可以对这些文件做后续处理了。代码中匹配js子目录下以*.js结尾的文件，接着以链式调用pipe()方法对这些文件进行处理，每调用一次gulp.pipe()方法会做一步处理，pipe(jshint())是使用插件进行代码验证，pipe(jshint.reporter('default'))是输出验证结果。
在Windows控制台中执行该任务：
gulp jshint
输出中会产生错误提示信息，包括存在语法错误的JavaScript文件路径、错误所在的行数以及错误的具体原因。

3. 压缩JavaScript代码：

JavaScript文件以min.js的是对应的压缩版本。经过压缩能够减小JavaScript文件的体积，但可读性变差，在一定程度上起到保护源代码的作用。基于Node.js的压缩工具Uglify.js能对JavaScript代码进行压缩。需要借助Npm包管理工具安装：
npm install uglify-js -gd
由于Uglify.js作为控制台命令使用，需要进行全局安装。安装完成后，可使用uglifyjs --help命令确定是否安装成功。使用命令为：
uglifyjs [input files][options]
比如：uglifyjs main.js --compress --output main.min.js
命令执行后会生成main.js文件的压缩版本main.min.js文件。对于多个JavaScript文件，需要用到Uglify.js的Gulp插件。首先需要安装Uglify.js的Gulp插件，使用npm命令：
npm install --save-dev gulp-uglify
要在项目目录下执行上述安装命令。安装完毕后对项目中的gulpfile.js文件进行修改：
var gulp=require('gulp');
var uglify=require('gulp-uglify');
gulp.task('compress', function(){
  return gulp.src('./js/*.js').pipe(uglify()).pipe(gulp.dest('./dist'));
});
代码中首先加载gulp-uglify插件，然后就可以使用uglify对象来调用该插件的方法，其中通过gulp.src()方法匹配需要的压缩文件，然后使用gulp.pipe()方法执行一步操作，gulp.dest()方法将压缩后的JavaScript文件输出到了指定的路径。
编写完成任务文件，就可以使用命令：
gulp compress
任务执行完毕，进入项目dist目录下，其中是生成的压缩文件。

4. 使用Gulp Changed插件更新文件：

在使用Gulp进行项目管理时，可以只对修改过的文件进行编译或打包，使用Gulp的gulp-changed插件。该插件会检查文件是否被修改过，只有修改过的文件才会执行后续操作。
需要安装gulp-changed插件，使用npm：
npm install --save-dev gulp-changed
这需要在项目目录中安装，然后更改项目的gulpfile.js文件：
var gulp=require('gulp');
var changed=require('gulp-changed');
gulp.task('changed', function(){
  return gulp.src('./js/*.js').pipe(changed()).pipe(gulp.dest('./dist'));
});
也可以在其他任务中依赖该任务：
gulp.task('compress',['changed'], function(){
  return gulp.src('./js/*.js').pipe(uglify()).pipe(gulp.dest('./dist'));
});
代码中在压缩任务中增加一个参数，该参数是一个数组，用于执行所依赖的其他任务。代码执行compress任务依赖于changed任务，当执行conpress任务时只会对修改过的文件进行压缩。
还可以监视文件内容的变动：
gulp.task('watch',function(){
    gulp.watch('./js/*.js', ['compress']);
});
在控制台通过gulp watch命令执行watch任务，该任务会一直在后台运行，每当对文件进行修改保存后，Gulp会自动执行compress任务对修改后的文件进行压缩。

5. 使用Gulp Plumber插件处理异常：

当JavaScript文件中出现语法错误时，Uglify.js插件会抛出一个异常，并导致watch任务中断。为了解决这个问题，需要使用Gulp Plumber插件来处理异常。
首先需要安装插件：
npm install --save-dev gulp-plumber
插件使用很简单，需要先加载插件：
var plumber=require('gulp-plumber');
需要在前面的JavaScript压缩任务中增加一步异常处理操作：
gulp.task('compress',['changed'], function(){
  return gulp.src('./js/*.js').pipe(pluber()).pipe(uglify()).pipe(gulp.dest('./dist'));
});
代码中在压缩任务中增加了一步操作，使用Gulp Plumber插值处理压缩过程中产生的异常。运行gulp watch命令后，当JavaScript语法错误，控制台会输出错误信息，此时watch任务不会终止，语法错误经过修正后保存，Gulp仍然可以对修改后的JavaScript文件进行压缩。

6. 使用Gulp压缩图片：

需要使用插件gulp-imagemin，该插件可用于PNG、JPEG、GIF及SVG等格式的图片资源进行压缩。插件安装命令：
npm install --save-dev gulp-imagemin
在项目中安装完成后，对gulpfile.js文件进行修改，增加图片压缩任务：
var gulp=require('gulp');
var imagemin=require('gulp-imagemin');
gulp.task('imagemin', function(){
  return gulp.src('img/*').pipe(imagemin()).pipe(gulp.dest('./img));
});
通过运行命令gulp imagemin来执行该任务。还可以对gulp-imagemin插件的参数进行设置：
gulp.task('imagemin', function(){
  gulp.src('img/*').pipe(imagemin({optimizationLevel:5, progressive:true,
  interlaced:true, multipass:true})).pipe(gulp.dest('dist/img));
});
使用imagemin插件时可以指定一些参数，optimizationLevel用于指定压缩级别，取值0~7， 默认3；progressive表示是否为无损压缩JPG图片，默认false；interlaced表示是否隔行扫描GIF进行渲染，默认false； multipass表示是否多次优化SVG直到完全优化，默认false。

7. 使用Gulp编译Less：

Less是一种CSS预处理语言，扩充了CSS，增加了变量、混合、函数等功能。Less可以运行在Node.js或浏览器端，但需要依赖Less的编译器或解析器。
Less有两种使用方式，一种是将Less语法编译为常规的CSS语法，然后在浏览器引用编译后的CSS文件；另一种是直接在浏览器引入Less文件，然后引入Less的解析器。
1）将Less语法编译为常规的CSS语法：
首先要安装Less编译器，使用npm包管理器：
npm install less -gd
安装完成可以运行lessc --help确定是否安装成功。
然后使用Less编译器将main.less文件编译成CSS语法：
lessc ./less/main.less >./css/main.css
命令中的“>”表示重定向，把编译后的内容输出到css目录下的main.css文件中，然后在浏览器中引入编译后的main.css文件。
2）直接在浏览器引入Less文件和Less的解析器：
首先要获取Less解析器库文件，可以通过npm或Bower安装。安装完成后就可以在HTML页面中直接引入Less文件了：
<link rel="stylesheet/less" href="less/main.less"/>
<script src="bower_components/less/dist/less.js"></script>
其中，less.js为解析器代码，必须在less样式文件之后引入。
3）通过Gulp任务实现Less编译：
需要安装Less的Gulp插件，安装命令为：
npm install gulp-less
安装完毕，使用gulp-less插件编写一个Gulp任务，用于处理Less编译：
var gulp=require('gulp');
var less=require('gulp-less');
gulp.task('less', function(){
  gulp.src('less/*.less').pipe(less()).pipe(gulp.dest('./css));
});
代码中编写了less任务，其中匹配less目录下的所有以less为扩展名的文件，接着使用less插件对这些文件进行编译，然后将编译后的内容输出为css文件。执行该任务，命令为：
gulp less
还可以监视Less文件的变化，当Less文件被修改后自动编译：
gulp.task('watch', function(){
  gulp.watch('./less/*.less', ['less']);
});

五、Webpack：

Webpack是一个模块化加载器，支持同步和异步依赖加载，同步依赖会在编译时直接打包输出到目的文件，而异步依赖会单独生成一个代码块，在浏览器运行时需要时异步加载该代码块。默认情况下，Webpack只能处理JS文件，通过加载器可以将其他类型的资源转化为JS输出，而且有插件可以使用。

1. 安装：

全局安装：
npm i webpack -g
也可以将Webpack作为项目依赖在项目中安装，这时首先用npm初始化项目：
npm init
然后运行命令在项目中安装Webpack，并将其写入package.json依赖字段devDependencies：
npm i webpack --save-dev

2. 基本使用：

通过Webpack命令指定要打包的入口文件和最终输出文件来打包应用：
webpack ./app.js app.bundle.js
其中，指定入口文件为./app.js，Webpack命令会解析依赖的文件，然后打包输出到app.bundle.js
然后可以在node.js环境运行打包后的app.bundle.js来看效果：
node app.bundle.js
当然，也可以在浏览器环境运行查看效果。

3. 简单打包命令行：

webpack <entry> <output>
其中，<entry>为要打包的入口文件路径，<output>为打包后的文件路径。Webpack提供了很多参数，常用的有：
·-p：对打包后的代码进行压缩
·--watch：文件发生变化时，重新打包
·--config：指定Webpack打包配置文件
·--progress：在终端显示打包过程

4. 配置文件：

可以在项目的根目录下提供一个配置文件，其中进行详细配置，在项目根目录下直接使用：
webpack
Webpack默认会调用项目下的webpack.config.js文件。也可以使用- -config参数指定配置文件：
webpack --config webpack.config.build.js
配置文件的内容需要通过module.exports进行导出。示例：
mudule.exports={
    //配置选项
}
Webpack配置文件中的选项有externals、target、cache、loader、devServer、plugins、context、entry、output、module、resolve、resolveLoader等。
1）context选项：用来配置基础路径，必须为绝对路径，默认为process.cwd()，即运行webpack命令的目录。
2）entry选项：用来配置要打包的入口文件，值可以是字符串、数组、对象，该选项指定的路径会相对于context选项指定的路径进行查找。
·字符串：直接指定相对于context选项的路径，如entry:"./entry"
·数组：为路径数组，Webpack会按序打包，但只导出最后一个文件，示例：
entry:["./entry1", "./entry2"]
·对象：键名为随意指定的块名，键值可以为字符串或数组类型，块名可以在output选项中使用，示例：
{entry:{page1:"./page1", page2:["./entry1", "./entry"]},
output:{filename:"[name].bundle.js"}}
通过上述选项配置，运行后在根目录下会生成page1.bundle.js和page2.bundle.js文件。
3）output选项：用来配置输出信息：
output.filename
配置打包后的文件名。应使用output.path来指定输出路径，filename会相对于output.path来输出。单入口示例：
{entry:entry:'./src/app.js',
output:{filename:'bundle.js',path:__dirname+'build'}}
写入路径为./build/bundle.js
如果项目有多个入口，对于每个入口打包后的文件名需要保证其唯一性。Webpack提供了以下模式来动态文件生成输出文件名：
·[name]：入口文件块名
·[hash]：每个入口打包后的hash值
·[chunkhash]：在使用代码分割时，异步加载的文件hash值
多入口示例：
{entry:entry:{'./src/app.js',search:'./src/search.js'},
output:{filename:'[name].js',path:__dirname+'build'}}
写入路径为./build/app.js、./build/search.js
其中output对象中也可以加入filename:'[hash].js',filename:'[chunkhash].js',。
4）module选项：用来进行模块加载相关配置。
module.loaders用于加载数组，当依赖文件匹配指定的test模式时，Webpack会指定调用数组中的相应加载器去处理该文件，然后返回JS格式的文件。加载器是一个对象，该对象有以下属性：
·test：正则表达式，Webpack用其匹配相应的文件，通常用来匹配文件后缀
·exclude：不应该被loader处理的文件
·include：一个路径数组，这些路径将会被loader处理
·loader：test匹配到的文件对应的加载器，值是一个加载器名字字符串，多个加载器之间用!分隔
示例：
module:{
    loaders:[
    test:/\.jsx$/,
    include:[path.resolve(__dirname, 'app/src'), path.resolve(__dirname, 'app/test')],
    loader:'babel-loader'
}]}
其中，test中用正则表达式匹配jsx后缀文件，include中的目录会被loader解析，loader指定的babel-loader用来解析ES6语法，也可以只使用babel，Webpack将会自动加上-loader。
5）resolve选项：用来配置依赖文件的匹配，如别名配置、模块查找目录、默认查找文件后缀等。其中有子选项：
·resolve.alias：用来配置依赖文件的别名，值是一个对象，其中键名是别名，值是路径
·resolve.root：用来指定模块的查找根目录，必须为绝对路径，值为路径字符串或路径数组。如果是路径数组，Webpack会依次在这些路径中查找，如果找到则终止，否则在下一个路径中继续查找。示例：
//webpack.config.js文件中
var path=require('path');
//...
resolve:{
    root:[path.resolve('./app/modules'), path.resolve('./vendor/modules')]
}
·resolve.modulesDirectories：用来指定模块目录，值是一个路径数组，默认值为：
["web_modules", "node_modules"]
6）devServer选项：用来配置webpack-dev-server的行为。如使用代码来指定服务的根目录：
{devServer:{contentBase:"./build",}}

5. 开发调试：

可以使用webpack-dev-server在浏览器中进行调试。webpack-dev-server是一个基于Express的Node.js服务器，在文件改变时会自动触发打包过程，然后通过Socket.IO通知浏览器刷新页面。
1）安装：
npm i -g webpack-dev-server
2）启动服务：
webpack-dev-server
不带参数运行命令，默认会读取webpack.config.js进行打包，可以通过-config来指定配置文件。
3）命令行参数：
所有Webpack命令接受的参数，webpack-dev-server都可以接受，除此之外还有其他参数：
·--content-base：指定请求的根路径
·--host：指定服务器端监听的地址，可以是IP地址或者域名，当值为0.0.0.0时可以监听一台机器的所有IP地址，如127.0.0.1或机器在局域网中的IP地址
·--port：指定服务器监听的端口号
·--compress：启用gzip压缩
·--inline：自动将Socket.IO代码注入到打包后的文件中。启用该选项，当文件内容改变时可以自动刷新浏览器
4）配置文件：
也可以使用Webpack配置文件中的devServer选项对webpack-dev-server进行配置。示例：
module.exports={
//...
    devServer:{inline:true}
}

6. 使用插件：

Webpack还允许使用插件来控制打包的过程。
1）安装插件：
通过npm安装相关插件，如果安装WebpackBrowserPlugin插件，命令为：
npm install --save-dev webpack-browser-plugin
然后在webpack.config.js中引用插件，并在插件选项中注册该插件：
var WebpackBrowserPlugin=require('webpack-browser-plugin');
module.exports={
    //......
    plugins:[new WebpackBrowserPlugin()],
    //......
}
如果是Webpack内置插件，首先需要在项目中安装Webpack，命令为：
npm install - -save-dev webpack
然后在配置中引用并注册插件，如使用DefinePlugin插件：
var webpack=require('webpack');
module.exports={
    //......
    plugins:[new webpack.DefinePlugin({VERSION:JSON.stringify("5fb3b9"),
    BROWSER_SUPPORTS_HTMLS:true,TWO:"1+1",
    "typeof window":JSON.stringify("object")})],
    //......
}
2）常用插件：
·DefinePlugin：用来替换指定变量
·ProviderPlugin：可以自动加载当前模块依赖的其他模块，并以指定别名注入到当前模块中。
如果当前模块依赖jQuery模块，在模块中直接用$引用jQuery对象，但不想手动添加模块：
var webpack=require('webpack');
module.exports={
    //......
plugins:[new webpack.ProvidePlugin({$:'jquery'})],
    //......
}

六、Rollup：

开发一个项目时，会将一个项目分成很多模块，每个模块完成相对独立的功能。如果项目依赖很多第三方组件，增加了许多请求，影响页面加载速度。可以使用模块化打包工具将所有文件最终打包成一个单独的输出文件中，可以使用Webpack、Browserify，而Rollup是ES6模块打包工具，利用静态分析语法树的特性只将需要的代码提取出来打包，而减小了代码体积。

1. 安装：

全局安装使用npm install -g rollup
也可以使用npm i -d rollup为每一个项目安装。

2. 配置：

大多数选项都可以通过命令行直接指定，也可以使用配置文件，或以编程方式设置选项。
import buble from 'rollup-plugin-buble';
export default{
    entry:'src/main.js',dest:'dist/bundle.js',
    format:'umd',plugins:[buble()]
};
上述代码将umd格式的内容输出到'dist/bundle.js中。如果使用命令行选项，则为：
-c-f umd dist/bundle.cjs.js
Rollup允许一个配置文件可以有多个目标文件，可以生成umd格式、ES格式文件，都是来自同一文件，示例：
import babel from 'rollup-plugin-babel';
import babelrc from 'babelrc-rollup';
let pkg=require('./package.json');
let external=Object.keys(pkg.dependencies);
export default{
    entry:'lib/index.js',plugins:[babel(babelrc())],external:external,
    targets:[
        {dest:pkg['main'],format:'umd',moduleName:'rollupStarterProject',sourceMap:true},
        {dest:pkg['jsnext:main'],format:'es6',sourceMap:true},
};
结果是在dist目录下生成rollup-starter-project.js及.js.map、.mjs.map为后缀的文件。

3. 命令：

语法为：rollup [options] <entry file>
其中options为选项：
·-v：显示版本号，如：rollup -v
·-c：指定配置文件，如：rollup -c rollup.config.dev.js
·-w：监控文件变化后重新渲染文件
·-i：等效为-input
·-o：等效于-output
·-f：格式化生成的包文件，等效于- -format，支持参数有amd、cjs、es6、iile、umd，es6为默认参数，为使用es6规范；amd为异步模块定义，主要有require.js和curl.js实现了amd规范；cjs为CommonJS规范；iile为自执行，放入<script>标签中；umd为通用模块定义。
将index.js转换为amd格式命令示例：
rollup --format amd --lib/index.js > build/index.js
·-e：全称--external，为扩展插件。示例：
//app.js
import moment from 'moment';
setInternal(function(){
    var timeStr=moment().format('h:mm:ss a');
    console.log('the time is '+timeStr);
},1000);
//build.js
import * as path from 'path';
rollup.rollup({
    entry:'app.js',
    external:['moment', path.resolve('.src/special-file.js')]
}).then(...)
数组中为外部依赖模块包的id列表，id可以是外部依赖项的名称，或一个文件绝对路径。
·-g：全称--globals，为全局属性，对umd/iife模块使用。示例：
var code=bundle.generate({
    format:'iife',
    moduleName:'MyBundle',
    globels:{backbone:'Backbone', underscore:'_'}
}).code;
属性类型为Object:(id:name)。
·-n：全称--name，为umd/iife模块名称。示例：
var code=bundle.generate({
    format:'iife',
    moduleName:'MyBundle',
}).code;
代码中，var MyBundle=(function(){...
·-u：全称--id，为amd/umd模块的id。示例：
var code=bundle.generate({
    format:'amd',
    moduleId:'my-bundle',
}).code;
代码中，define(['my-bundle'], ...
·-m：全称--sourcemap，产生sourcemap
·--no-strict：禁止生成use strict格式代码
·--no-indent：禁用缩进
·--environment <values>：设置传递<values>给配置文件。示例：
process.env.INCLUDE_DEPS==='true'
process.env.BUILD=='production'
如果使用--environment选项，通过process.env参数调用。
·--no-conflict：生成noConflict方法
·--intro：在bundle文件最前面插入内容
·--outro：在bundle文件最后面插入内容
·--banner：在bundle文件最前面插入内容
·--footer：在bundle文件最后面插入内容

4. 插件：

Rollup也支持使用插件，写到配置对象的plugin中即可。以rollup-plugin-label示例：
import babel from 'rollup-plugin-babel';
export default{
    entry:'src/main.js', format:'cjs',
    plugins;[babel()], dest:'rel/bundle.js'
};
babel的预设是独立写个文件src.babelrc。使用前首先确保安装了rollup-plugin-babel和babel预设babel-preset-es2015-rollup：
npm i rollup-plugin-babel babel-preset-es2015-rollup
这时就可以配合babel把ES6模块编译成ES5的bundle了。
其他常用插件还有：
·alias：定义打包时所用的别名
·ascii：在字符串中重写非ASCII字符
·auto-transform：根据package.json中的键来应用Browserify自动转换，就像Browserify
·babel：用Babel翻译代码
·bower-resolve：在Rollup中使用Bower解决算法
·browserify-transform：将Browserify作为插件使用进行转换
·buble：用Buble翻译代码
·coffee-script：将coffeeScript代码转换为JavaScript代码
·commonjs：将CommonJS模块转换为ES6形式
·eslint：核实入口以及引入的脚本代码
·filesize：在命令行中显示打包的文件大小
·hypothetical：从假想的文件系统引入模块
·image：引入jpg、png、gof、svg图片
·includepaths：提供引入模块的基础路径
·inject：检测依赖并且注入
·intanbul：使用Istanbul来处理代码覆盖
·json：将JSON转换为ES6
·jst：编译模板文件
·jsx：编译React的jsx，以及其他类型的jsx组件
·menory：从内存中读取入口文件
·nulti-entry：允许有多个入口文件
·node-builtins：允许在Rollup中使用Node.js内置的包
·node-resolve：使用Node.js模块解决方案
·pegjs：引入peg.js语法作为语法解析
·postcss：编译PostCSS并且插入head中
·ractive：预编译Rective组件
·replace：替换一组字符串的出现
·riot：编译riot.js标签文件
·string：将文本文件以string形式引入
·strip：移除调试时使用的陈述及函数，如console.log
·stylus-css-modules：编译Stylus并且注入CSS模块
·typescript：将TypeScript编译为JavaScript
·uglify：减小生成的bundle的体积
·vinyl：从Vinyl文件引入
·vue：编译Vue组件