1.2 ES6+编译

前言

本篇主要是讲述rollup.js下编译 ES6+源码

实现例子

• 编译ES6+代码
• 编译成umd格式(通用模块定义)

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-01-02/

npm i

npm run build

实现步骤

步骤1: 目录和准备

.
├── build # 编译脚本目录
│   └── rollup.config.js
├── dist # 编译结果目录
│   ├── index.js
│   └── index.js.map
├── example # HTML使用例子
│   └── index.html
├── package.json
└── src # ES6+ 源码
    ├── index.js
    └── lib
        └── demo.js

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 


## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

• rollup 模块是rollup.js编译的核心模块
• @rollup/plugin-babel 模块是rollup.js支持babel官方编译插件模块
• @babel/core 是官方 babel 编译核心模块
• @babel/preset-env 是官方 babel 编译解析ES6+ 语言的扩展模块

步骤2: rollup配置

• 编译配置文件路径 ./build/rolluo.config.js
• 编译配置文件

const path = require('path');
const { babel } = require('@rollup/plugin-babel');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

console.log('babel=', babel);

module.exports = {
  input: resolveFile('src/index.js'),
  output: {
    file: resolveFile('dist/index.js'),
    format: 'umd',
  }, 
  plugins: [
    babel({
      presets: ['@babel/preset-env']
    }),
  ],
}

• 在./package.json配置编译执行脚本

  {
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.js"
  },
  }
  

步骤3: 待编译ES6源码

• 源码路径 ./src/index.js和./src/lib/demo.js
• ./src/index.js源码内容

import demo from './lib/demo';

const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1, ...arr2]);

async function initDemo () {
  let data = await demo();
  console.log(data);
}

initDemo();

• ./src/lib/demo.js源码内容

function demo() {
  return new Promise((resolve, reject) => {
    try {
      setTimeout(()=>{
        const obj1 = {a:1};
        const obj2 = {b:2};
        const result = {...obj1, ...obj2};
        resolve(result);
      }, 1000)
    } catch (err) {
      reject(err);
    }
  })
}

export default demo;

步骤4: 编译结果

• 在项目目录下执行 npm run build
• 编译结果在目录 ./dist/ 下
• 编译成ES5结果为
• 注意：页面使用的时候要引入 babel-polyfill.js或者打包的时候把babel-polyfill 模块引用进入项目中

(function (factory) {
  typeof define === 'function' && define.amd ? define(factory) :
  factory();
}((function () { 'use strict';

  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try {
      var info = gen[key](arg);
      var value = info.value;
    } catch (error) {
      reject(error);
      return;
    }

    if (info.done) {
      resolve(value);
    } else {
      Promise.resolve(value).then(_next, _throw);
    }
  }

  function _asyncToGenerator(fn) {
    return function () {
      var self = this,
          args = arguments;
      return new Promise(function (resolve, reject) {
        var gen = fn.apply(self, args);

        function _next(value) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
        }

        function _throw(err) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
        }

        _next(undefined);
      });
    };
  }

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);

    if (Object.getOwnPropertySymbols) {
      var symbols = Object.getOwnPropertySymbols(object);
      if (enumerableOnly) symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
      keys.push.apply(keys, symbols);
    }

    return keys;
  }

  function _objectSpread2(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? arguments[i] : {};

      if (i % 2) {
        ownKeys(Object(source), true).forEach(function (key) {
          _defineProperty(target, key, source[key]);
        });
      } else if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
      } else {
        ownKeys(Object(source)).forEach(function (key) {
          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
      }
    }

    return target;
  }

  function demo() {
    return new Promise(function (resolve, reject) {
      try {
        setTimeout(function () {
          var obj1 = {
            a: 1
          };
          var obj2 = {
            b: 2
          };

          var result = _objectSpread2(_objectSpread2({}, obj1), obj2);

          resolve(result);
        }, 1000);
      } catch (err) {
        reject(err);
      }
    });
  }

  var arr1 = [1, 2, 3];
  var arr2 = [4, 5, 6];
  console.log([].concat(arr1, arr2));

  function initDemo() {
    return _initDemo.apply(this, arguments);
  }

  function _initDemo() {
    _initDemo = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      var data;
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return demo();

            case 2:
              data = _context.sent;
              console.log(data);

            case 4:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
    return _initDemo.apply(this, arguments);
  }

  initDemo();

})));

步骤5: 浏览器查看结果

• example目录./example/index.html
• example源码

<html>
  <head>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
  </head>
  <body>

    <script src="./../dist/index.js"></script>
  </body>
</html>

• 直接用chrome打开项目本地的 ./example/index.html
• 打开工作台console 就会显示可运行结果

[1, 2, 3, 4, 5, 6]
{a: 1, b: 2}
>

后记

本篇主要讲述了 rollup.js 编译 ES6+的代码，运用了babel插件编译更加高级的ES语法。但是注意使用过程中 babel-polyfill 的引用。

前一篇文章包括本篇都在讲述rollup.js编译使用，但是实际项目中编译开发主要分成了 开发模式和生产模式两种甚至更多种情况，接下来两篇主要讲述rollup.js怎么配置开发模式和生产模式