格式爲'es'時如何處理全局？

Question

我已經確定了一個全局和外部的Javascript庫（incremental-dom）。我正在使用腳本標記加載庫。

當彙總格式爲「iife」時，將庫注入到iife中並且一切正常。

然而，當我使用「上課」格式，全球不會被引用，瀏覽器將拋出類型錯誤：

Uncaught TypeError: Failed to resolve module specifier 'incremental-dom'

這是我的rollup.config.js文件：

const path = require('path'); 
 
const root = process.cwd(); 
 
const string = require('rollup-plugin-string'); 
 
const superviews = require('rollup-plugin-superviews'); 
 

 
export default [ 
 
    { 
 
    input: path.resolve(root, 'src', 'idx-admin-tab', 'component.js'), 
 
    plugins: [ 
 
     superviews({include: 'src/**/*.html'}), 
 
     string({include: ['src/**/*.css', 'src/**/*.svg']}) 
 
    ], 
 
    globals: {'incremental-dom': 'IncrementalDOM'}, 
 
    external: ['incremental-dom'], 
 
    output: { 
 
     file: path.resolve(root, 'dist', 'idx-admin-tab.es.js'), 
 
     format: 'es' 
 
    } 
 
    } 
 
];

Answer 1

globals只能在上下文或umd輸出 - 如果要創建es捆綁包，它將被簡單地忽略。

如果你想只使用瀏覽器的原生import支持，你就必須把模塊標識符incremental-dom到一個瀏覽器可以解析 - 這樣的事情：

export default [ 
    { 
    // ... 
    external: ['incremental-dom'], 
    paths: { 
     'incremental-dom': '/node_modules/incremental-dom/dist/incremental-dom.js' 
    }, 
    // ... 
    } 
]; 

不幸的是增量-DOM沒有按」沒有ESM構建，所以你不能import它。因此，如果您不想捆綁它，則即使在es模式下，您也必須使用全局模式Rollup使用全局IncrementalDOM。

你應該能夠做到這一點與rollup-plugin-virtual：

export default [ 
    { 
    // ... 
    plugins: [ 
     superviews({include: 'src/**/*.html'}), 
     string({include: ['src/**/*.css', 'src/**/*.svg']}), 
     virtual({ 
     'incremental-dom': 'export default window.IncrementalDOM' 
     }) 
    ], 
    // ... 
    } 
];