如何将config.js从Rollup打包中排除？Polymer/lit-element开发场景

我来帮你解决这个问题——你现在遇到的核心问题是静态import语句会被Rollup当作依赖打包进最终文件，而你需要让config.js保持独立，方便用户动态修改。下面是具体的解决步骤：

1. 修改Rollup配置，标记config.js为外部依赖 #

在你的Rollup配置中添加external选项，告诉Rollup不要把config.js打包进最终文件。如果用的是UMD格式，还要在globals里指定对应的全局变量名，确保运行时应用能正确找到它：

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

const plugins = [
  resolve({
    mainFields: false,
    browser: true,
  }),
  commonjs()
];

export default [
  {
    input: 'src/index.js',
    output: {
      file: 'dist/app.js',
      format: 'umd',
      // 自定义全局变量名，后续应用会从这里获取配置
      globals: { '../config.js': 'AppConfig' }
    },
    plugins: [...plugins],
    // 标记config.js为外部依赖，跳过打包
    external: ['../config.js']
  },
];

2. 调整config.js的暴露方式 #

为了让运行时能访问到配置内容，我们需要把config.js改成全局暴露的形式（或者保持ES模块格式，在HTML中单独引入）。比如修改config.js：

// 把配置挂载到window全局对象上，和Rollup配置里的globals名对应
window.AppConfig = {
  sources: [
    // 你的配置内容...
  ]
};

如果你想保留ES模块写法，可以在HTML中单独引入它：

<script type="module" src="config.js"></script>

这种情况下，config.js可以保持原来的导出格式：

export const sources = [
  // 你的配置内容...
];

3. 修改应用中的配置加载逻辑 #

替换原来的静态import，改成从全局变量获取或者动态加载：

方式一：从全局变量获取（简单直接）

// 替换原来的import语句
const sources = window.AppConfig.sources;

// 后续正常使用sources初始化应用即可

方式二：动态import（更符合ES模块规范）

如果你的目标环境支持动态import（现代浏览器都支持），可以用这种方式异步加载配置：

// 替换原来的import语句
async function initAppWithConfig() {
  const { sources } = await import('../config.js');
  // 在这里执行应用初始化逻辑，比如渲染组件
  renderApp(sources);
}

// 启动加载流程
initAppWithConfig();

4. 确保config.js的位置正确 #

打包完成后，把config.js放到dist目录（和app.js同层级），这样用户可以直接修改这个文件，下次刷新页面时应用就会加载新的配置内容。

这样调整后，Rollup就不会把config.js打包进app.js里，完全满足你让用户动态修改配置的需求啦！

内容的提问来源于stack exchange，提问作者Ricardo Reis