rollup在external中配置npm包名称，项目中就可以使用esm的模块规范，否则就只能使用commonjs规范？

Question

背景

使用rollup进行打包，打包过程报错'default' is not exported by ../../node_modules/js-cookie/src/js.cookie.js, imported by ../acn-jssdk-adapter/src/jssdk/jssdk-h5.js。
类似的还有axios包

解决方式：

方案一：项目中使用commonjs导入js-cookie

//import Cookies from 'js-cookie' 这种方式打包时候会报上面的错误
const Cookies = require('js-cookie');

方案二：

1. 仍然使用esm规范导入 import Cookies from 'js-cookie'
2. 配置文件中external字段配置为 external:['js-cookie']

配置文件

import path from 'path';
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import {eslint} from 'rollup-plugin-eslint'
import babel from 'rollup-plugin-babel'
import buble from 'rollup-plugin-buble'
import json from 'rollup-plugin-json';
import alias from 'rollup-plugin-alias';
import replace from 'rollup-plugin-replace';
import typescript from 'rollup-plugin-typescript'
export default {
    input: 'src/index.js',
    //维持包文件指定id文件维持外链，不参与打包构建
    external: ['vue','react','tangram-plugin-interface'],//可以增加'js-cookie'
    plugins:[
        alias({
            // 省略别名
            ...
        }),
        typescript(),
        resolve({
            jsnext: true,
            main: true,
            browser: true,
        }),
        babel({
            babelrc: false,
            presets: [
                [
                    "@babel/preset-env",
                      {
                        modules: false, //设置ES6 模块转译的模块格式 默认是 commonjs
                        spec: true,
                        debug: false, // debug，编译的时候 console
                        forceAllTransforms: true,
                        // useBuiltIns: 'usage', // 是否开启自动支持 polyfill
                        useBuiltIns: false, // 是否开启自动支持 polyfill
                        corejs: 3
                      }
                ],
                "@babel/preset-react"
            ],
              plugins:[
                "@babel/plugin-transform-react-jsx",
                "@babel/plugin-proposal-class-properties"
              ],
              exclude: 'node_modules/**',
              extensions: ['js', 'ts','jsx'],
              runtimeHelpers: true,
        }),
         commonjs({
              // 避免commonjs解析jsx的错误
              exclude: path.resolve(__dirname,'..','packages/acn-component/**'),
              // include: path.resolve(__dirname,'..','node_modules/**'),
              extensions: [ '.js','.jsx']
            }),
         json(),
         replace({
              'process.env.NODE_ENV': JSON.stringify( 'production' )
            })
    ]
    
}

问题

1.为何external中指定不编译js-cookie，使用esm规范导入就不会报错？
2.js-cookie 入口文件内容module.exports = require('./dist/js.cookie'),为何可以同时支持esm和requirejs规范导入？

Answer 1

可参考 https://juejin.im/post/684490... 解决了所有的疑惑