Javascript 树抖动不适用于节点包

我有一个节点模块，其形状通常如下所示（例如，为了简化）：

然后在我的Next.js应用程序（也在Create React应用程序中测试）中，我导入如下值：

# Home

import { color } from 'my-module'

const Home = () => (
  <h1 style={{ color: color.red }}>Hello!</h1>
)

export default Home

---

然后，正如我所期望的，最终的包只包括颜色值。但我不想如此具体地进口。这里有什么明显的错误吗？

重构

color

和

images

以具有默认导出而不是命名导出，然后重写

索引

导入和导出的方式修复了问题

例如

---

在构建过程中是否省略了这些对象文本中的常量？我不认为摇树会那样做。如果你是这个意思的话，黄色或蓝色也不行。这是我必须解决的另一个问题。尽管这样做可以导入单个命名的导出，而且似乎可以接受：

import{image1}from'my module/images'

不应该工作，但会引发异常。我猜您的transpiler/bundler在这里过于宽松，无法向后兼容commonjs模块。尝试使用

导出{colorExport as color}

而不是那样做-谢谢！与我在下面的答案中所做的更改相比，它的破坏性更小。

# images.js

export var image1 = '<base64 string approximately ~ 500kb>';
export var image2 = '<base64 string approximately ~ 500kb>';

# index.js

// JavaScript tokens
import * as colorExport from './color';
import * as imagesExport from './images';

export var color = colorExport;
export var images = imagesExport;

# Home

import { color } from 'my-module'

const Home = () => (
  <h1 style={{ color: color.red }}>Hello!</h1>
)

export default Home

import * as color from 'my-module/color'

# color.js

export default {
  red: '#f00',
  yellow: '#ff0',
  blue: '#00f'
}

# index.js

export { default as color } from './color';
export { default as images } from './images';