Rollup commonjs

Question

我正在開發一個Angular2項目。我瀏覽了Angular2的一些文檔，並且能夠生成ngFactory文件。按照文檔中的建議，我使用了彙總js。我有一些非es6 npm軟件包。我用require來加載非es6包。

文檔（angular2和rollup）建議使用rollup-plugin-commonjs捆綁非es6模塊。以下是我的彙總配置。

export default { 
 
    entry: 'scripts/main.js', 
 
    dest: 'build/app.js', // output a single application bundle 
 
    sourceMap: true, 
 
    format: 'iife', 
 
    context: 'this', 
 
    plugins: [ 
 

 
     nodeResolve(
 
      { 
 
       jsnext: true, 
 
       module: true, 
 
      } 
 
     ), 
 
     commonjs({ 
 
      include: 'node_modules/**/**', 
 
     }) , 
 

 
     uglify() 
 
    ] 
 
}

我已經制定了CommonJS的插件。但仍然瀏覽器錯誤爲「需要是未定義的」。如何在沒有webpack/browserify的幫助下將非es6模塊捆綁在一起請指教。

Answer 1

我正在使用的安裝程序將供應商/應用程序文件拆分爲單獨的捆綁包。我還沒有考慮讓這個 與AoT一起工作，這可能是一個問題，但我確實有commonJs模塊正在使用這種方法。

它確實加速了開發，只創建我的應用程序包來測試（我在Webpack和20s構建時間方面存在問題）。

在vendor.ts文件（我的是在同一目錄作爲main.ts文件）我有類似如下：

import * as _leaflet from 'leaflet/dist/leaflet'; //leaflet is installed via npm in this case. 
... 
export default { 
    ... 
    _leaflet 
}; 

和使用CommonJS的一個vendor.rollup.js文件插件如：

commonjs({ 
    include: [ 
     helpers.root('node_modules', '**') //This is just a method to make an absolute path to node_modules. See Angular 2 webpack docs for that. 
    ] 
}) 

它創建一個供應商包。

然後在我的app.rollup.js（配置文件來創建我的應用程序包）。

export default { 
    entry: 'src/main.ts', 
    dest: 'bundles/app.js', 
    format: 'iife', 
    sourceMap: true, 
    moduleName: 'app', 
    plugins: [ 
     ... 
    ], 
    external: [ 
     'leaflet/leaflet' //Yeah, you can rename it to have nicer looking imports. 
    ], 
    globals: { 
     ... 
     'leaflet/leaflet': 'vendor._leaflet' //And map it to the correct global var here. 
    } 
}; 

最後，在我的應用程序可以使用

import * as L from 'leaflet/leaflet';

提醒：我還沒有與AOT編譯或生產的代碼，但，一步步一次嘗試這樣做。