rollup babel

https://babeljs.io/setup#installation
https://www.rollupjs.com/guide/command-line-reference
yarn init -y
https://babel.dev/docs/en/babel-preset-env

// a.js
var promise = new Promise((resolve, reject) => {
    console.log('执行promise');
    resolve('promise');
})
// rollup.config.js
import babel from '@rollup/plugin-babel';

const config = {
  input: 'a.js',
  output: {
    dir: 'output',
    format: 'esm'
  },
  plugins: [babel({babelHelpers: 'bundled'})]
};

export default config;

// babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "2"
      }
    ]
  ]
}
// output/a.js
import 'core-js/modules/es6.object.to-string.js';
import 'core-js/modules/es6.promise.js';

new Promise(function (resolve, reject) {
  console.log('执行promise');
  resolve('promise');
});

2、rollup.config.js
修改format

// -f, --format <format>       输出的文件类型 (amd, cjs, esm, iife, umd)
format: 'iife'

此时,output/a.js

(function () {
    'use strict';

    new Promise(function (resolve, reject) {
      console.log('执行promise');
      resolve('promise');
    });

})();

3、rollup.config.js
修改format

// -f, --format <format>       输出的文件类型 (amd, cjs, esm, iife, umd)
format: 'umd'
(function (factory) {
    typeof define === 'function' && define.amd ? define(['core-js/modules/es6.object.to-string.js', 'core-js/modules/es6.promise.js'], factory) :
    factory();
})((function () { 'use strict';

    new Promise(function (resolve, reject) {
      console.log('执行promise');
      resolve('promise');
    });

}));


两个问题
1、node_modules 中没有corejs
2、打包后的文件中没有引入promise,没有将promise编译进去

安装core-js
yarn add core-js@2

import {nodeResolve} from '@rollup/plugin-node-resolve';


在进行一次打包,查看打包的文件,存在require
需求安装@rollup/plugin-commonjs'
import commonjs from '@rollup/plugin-commonjs';

posted @ 2022-08-05 19:23  Running00  阅读(161)  评论(0编辑  收藏  举报