使用rollup打包react+ts,external属性无效

993 阅读1分钟

rollup.config.js配置文件如下

import image from '@rollup/plugin-image';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import babel from "@rollup/plugin-babel";
import { terser } from 'rollup-plugin-terser';
/** @type {import('rollup').RollupOptions} */
const externalAry = [
    'react',
    'react-dom',
    'react-scripts',
    'typescript'
]
const options = {
    input: {
        A:'src/CoomA/index.js',
        B:'src/CoomB/index.js'
    },
    
    // output: [{
    //     file:  path.resolve(__dirname,  pkg.module),
    //     format: 'es',
    // }],
    output:{
        dir:'dist',
        format: 'es'
    },
    plugins: [
        resolve(),
        babel({
            exclude: 'node_modules/**',  // 排除node_modules 下的文件
            babelHelpers:'runtime'
        }),
        commonjs(),
        typescript(),
        image(),
        postcss(),
       
        terser()
    ],
    external:externalAry,
    
};
export default options;

.babelrc配置如下

{
    "presets": [
        "@babel/preset-typescript","@babel/preset-react",
      [
        "@babel/preset-env",
        {
          "modules": false,
          "useBuiltIns": "usage",
          "corejs": "2.6.10",
          "targets": {
            "ie": 10
          }
        }
      ]
    ],
    "plugins": [
        "@babel/plugin-syntax-jsx",
        "@babel/plugin-transform-react-jsx",
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ],
    "ignore": [
        "node_modules/**"
      ]
  }

打包后的截图

image.png

求大神指点,external属性配置了还是打包了react,导致打包后的文件如此庞大。小女子再次先跪谢了