Next.js集成TradingView时如何通过Rollup生成polyfills.js到dist目录

你当前的Rollup配置仅定义了单个输入输出规则，对应生成bundle.js，要单独生成polyfills.js按以下步骤操作即可：

• 第一步：准备polyfill入口文件
  在udf目录下新建polyfill的入口文件，比如路径为lib/polyfills.js，写入Trading View运行需要的所有兼容polyfill代码，比如ES6+方法兼容、fetch兼容等内容。
• 第二步：修改Rollup配置
  给rollup.config.js的导出配置数组新增第二个构建项，专门用于打包polyfills，修改后的完整配置如下：

  /* globals process */
  
  import { terser } from 'rollup-plugin-terser';
  import { nodeResolve } from '@rollup/plugin-node-resolve';
  
  const environment = process.env.ENV || 'development';
  const isDevelopmentEnv = (environment === 'development');
  
  export default [
      // 原有的bundle.js构建配置
      {
          input: 'lib/udf-compatible-datafeed.js',
          output: {
              name: 'Datafeeds',
              format: 'umd',
              file: 'dist/bundle.js',
          },
          plugins: [
              nodeResolve(),
              !isDevelopmentEnv && terser({
                  ecma: 2017,
                  safari10: true,
                  output: { inline_script: true },
              }),
          ],
      },
      // 新增的polyfills.js构建配置
      {
          input: 'lib/polyfills.js',
          output: {
              format: 'iife',
              file: 'dist/polyfills.js',
          },
          plugins: [
              nodeResolve(),
              !isDevelopmentEnv && terser({
                  ecma: 5, // 兼容更低版本浏览器可保留为es5，无兼容需求可调整为更高版本
                  safari10: true,
                  output: { inline_script: true },
              }),
          ],
      }
  ];
  

• 第三步：执行构建
  重新运行npm run build，完成后dist目录下就会同时生成bundle.js和polyfills.js两个文件。

可选调整：如果不需要单独拆分polyfill，也可以直接把polyfill代码导入到udf-compatible-datafeed.js的顶部，无需额外新增配置项，所有代码会合并输出到bundle.js中，就不用在项目里单独引入polyfills.js文件。

内容的提问来源于stack exchange，提问作者margherita pizza