2016-11-29 84 views
0

我使用UMD模塊庫時WebPack和導出的類有問題。問題是,當我嘗試將壓縮包加載到瀏覽器中時,那麼導出的對象是空的(沒有與導出對象匹配的屬性)。在使用WebPack,Babel和ES2015的UMD模塊中沒有導出的類型

我創建了這個簡單的測試項目:

項目結構

~/Playground/webpack-exports-test tree -I node_modules 
. 
├── build 
│   ├── test.html 
│   ├── testlib.js 
│   └── testlib.js.map 
├── bundle.js 
├── package.json 
├── src 
│   ├── a.js 
│   └── b.js 
└── webpack.config.js 

webpack.config.js

let path = require('path'); 
let libraryName = 'testlib'; 
let bundleName = libraryName + '.js'; 

module.exports = { 
    context: __dirname, 
    entry: './bundle.js', 
    output: { 
     path: path.join(__dirname, 'build'), 
     filename: bundleName, 
     library: libraryName, 
     libraryTarget: 'umd', 
     umdNamedDefine: true 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    } 
}; 

的package.json

{ 
    "name": "webpack-exports-test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
     "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
     "babel-core": "^6.18.2", 
     "babel-loader": "^6.2.8", 
     "babel-preset-es2015": "^6.18.0", 
     "webpack": "^1.13.3" 
    } 

} 

SRC/a.js

export class A { 
} 

SRC/b.js

import {A} from './a.js' 

export class B extends A { 
} 

bundle.js

import {A} from './src/a.js' 
import {B} from './src/b.js' 

當我嘗試調試由WebPack生成的代碼時,看起來類對象已被正確創建,傳遞給exports,但沒有任何內容返回到全局對象。

請幫忙嗎?

回答

0

我找到了答案。問題是條目bundle.js沒有導出任何符號。

這使得它的工作

import {A} from './src/a.js' 
import {B} from './src/b.js' 
export {A as A} 
export {B as B} 
相關問題