2016-11-29 80 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}