Rollup.js次世代ES 6モジュール梱包機

私たちがプロジェクトをモジュール化する時、よく1つのモジュールを呼び出して、その中の1つの方法を使って、他のN余りの方法は私たちが呼び出していないで、私たちは呼び出していない方法あるいは変数がそれらを無視することを望んで、しかもjsファイルの中にパッケージしないで、このように大きいプロジェクトの中で著しくファイルの体積を減らすことができて、特にモバイル端末で、4 Gはとても速いですが、私はやはりもっと流量を節約したいです.
ES 6は私たちに実現してくれました.現在、webpackとbrowserifyはこのキックアスが爆発した機能をサポートしていません.今すぐこの機能を実現したいなら、rollup.jsを使ってみてください.
maths.js

export function square ( x ) {
    return x * x;
}
export function cube ( x ) {
    return x * x * x;
}

main.js

import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125

rollup.jsによってコンパイルされ、maths.jsにおいて呼び出されていない方法square()は、新しいjsにパッケージされていない.コードは次のとおりです.

(function () {
    'use strict';
    function cube ( x ) {
        return x * x * x;
    }
    console.log( cube( 5 ) ); // 125
}());

使用方法

gulpツールを使用してパッケージ機能を実行します.まず、gulpfile.jsおよびpackage.jsonファイルをルートディレクトリに作成します.これはgulpツールの標準です.どうやって遊ぶか分からないなら、まず研究しなければなりません.
依存モジュールのインストール

npm install gulp --save
npm install rollup --save
npm install rollup-plugin-commonjs --save
npm install rollup-plugin-node-resolve --save

gulpfile.js

var gulp        = require('gulp');
var fs          = require('fs');
var rollup      = require('rollup').rollup;
var commonjs    = require('rollup-plugin-commonjs');
var nodeResolve = require('rollup-plugin-node-resolve');

gulp.task('script', function () {
    return rollup({
        entry: 'src/main.js',
        plugins: [
            nodeResolve({ jsnext: true }),
            commonjs()
        ]
    }).then(function (bundle) {
        //    bundle + sourcemap
        var result = bundle.generate({
            // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
            // amd –    requirejs        
            // cjs – CommonJS，   node browserify / Webpack
            // es6 (default) –   ES6   
            // iife –            
            // umd –    CommonJs AMD      
            format: 'cjs'
        });

        fs.writeFileSync( 'bundle.js', result.code );

        bundle.write({
            format: 'cjs',
            dest: 'dist/main.js'
        });
    });
});</code></pre> 
 <p>     <code>main.js</code>   <code>main.js</code> ，   <code>npm script</code>     ，        js    。</p> 
 <p>    </p> 
 <h2>rollup   </h2> 
 <p>Plugins: https://github.com/rollup/rollup/wiki/Plugins</p> 
 <ul> 
  <li><p>babel – transpile code with Babel</p></li> 
  <li><p>browserify-transform – use Browserify transforms as plugins</p></li> 
  <li><p>coffee-script – convert CoffeeScript to JS</p></li> 
  <li><p>commonjs – convert CommonJS modules to ES6</p></li> 
  <li><p>eslint - verify entry and imported scripts</p></li> 
  <li><p>includepaths – provide base paths to resolve imports from</p></li> 
  <li><p>inject – detect dependencies and inject them</p></li> 
  <li><p>istanbul – Instruments code for code coverage with Istanbul</p></li> 
  <li><p>json – convert JSON to ES6</p></li> 
  <li><p>memory - load entry from memory</p></li> 
  <li><p>multi-entry – allows multiple 'entry points' instead of just one</p></li> 
  <li><p>node-resolve – use the Node.js module resolution algorithm (e.g. modules from <code>node_modules</code>, installed with npm)</p></li> 
  <li><p>pegjs - import PEG.js grammars as parsers</p></li> 
  <li><p>postcss - compile postcss and insert to head</p></li> 
  <li><p>ractive – precompile Ractive components</p></li> 
  <li><p>replace – replace occurrences of a set of strings</p></li> 
  <li><p>riot - compile Riot.js tag file</p></li> 
  <li><p>string – import text files as strings</p></li> 
  <li><p>stylus-css-modules – compile Stylus and inject CSS modules</p></li> 
  <li><p>uglify - minify generated bundle</p></li> 
  <li><p>vue - compile vue components</p></li> 
 </ul> 
 <h2>    </h2> 
 <p>  :<code>http://rollupjs.org</code> <br>Github:<code>https://github.com/rollup/rollup</code> </p> 
 <p><strong>     </strong></p> 
 <p><span class="img-wrap"></span></p> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1175661134414426112"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">