如何全局公开es6模块 [英] How to expose an es6 module globally

问题描述

我需要编写一个在全局窗口中可用的模块。

我使用es6创建模块，每个我定义的类都有自己的文件。

我正在使用webpack来对这些类进行babelify和绑定。

我的模块的入口点也是包含要暴露的全局文件。

li>

import-loader

expoert-loader

输出：库

black-magic：

我试过的代码示例：

我想要：window.MyMod

  // mymod.js 
导出类MyMod {
构造函数（aaa）{
 this.aaa = aaa; 
} 
 toString（）{
 return this.aaa; 
} 
} 
  

  // webpack.con fig 
 var entries = [
'./src/mymod.js'
]; 
 module.exports = {
 ...，
 module：{
 loaders：[
 {
 test：require.resolve（'./ src /mymod.js'），
 loader：'expose？MyMod'
}，
 {
 test：/\.js$/，
 exclude：/ node_modules /，
 loader：'babel-loader'，
 query：{
 presets：['es2015'] 
} 
} 
] 
 
 
 
 $ b 
这只让我在包含MyMod作为构造函数的窗口上获得一个MyMod对象。 / p> 
 
 
任何帮助都将被赞赏。
解决方案
作为导出Webpack和Babel无法运行的课程，除了您有一个命名导出而不是默认导出。您的输入文件应该是'./mymod'中的 
 
  import {MyMod}。 
 module.exports = MyMod; 
  
或
  module.exports = require（'./ mymod'）。MyMod; 
  
 
 
 
 
 
 
如果您不想做任何并保留'./ src / mymod.js'作为条目文件，在该文件中使用CommonJS导出而不是ES6导出：
  // mymod.js 
 exports.MyMod = class MyMod {
构造函数（aaa）{
 this.aaa = aaa ; 
} 
 toString（）{
 return this.aaa; 
} 
} 
  
 
I need to write a module that will be available on the window global.

I'm using es6 to create the module and every single class I define has it's own file.

I'm using webpack to babelify and bundle these classes.

The entry point of my module is also the file containing the global to be exposed.

I've tried every method to make this possibe, icluding:  


expose-loader  
import-loader  
expoert-loader  
output: library  
black-magic :(


Example of code I've tried:  

I want to get: window.MyMod
// mymod.js
export class MyMod {
    constructor(aaa) {
        this.aaa = aaa;
    }
    toString() {
        return this.aaa;
    }
}
// webpack.config
var entries = [
    './src/mymod.js'
];
module.exports = {
    ...,
    module: {
      loaders: [
            {
                test: require.resolve('./src/mymod.js'),
                loader: 'expose?MyMod'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
    ]
}
This only gets me an object MyMod on the window that contains MyMod as a constructor.

Any help will be appreciated.
解决方案
This is basically the same issue as Exporting a class with Webpack and Babel not working , except that you have a named export instead of a default export. Your entry file should be
import {MyMod} from './mymod';
module.exports = MyMod;
or
module.exports = require('./mymod').MyMod;




If you don't want to do any of these and keep './src/mymod.js' as entry file, use a CommonJS export instead of an ES6 export in that file:
// mymod.js
exports.MyMod = class MyMod {
    constructor(aaa) {
        this.aaa = aaa;
    }
    toString() {
        return this.aaa;
    }
}


                        
这篇关于如何全局公开es6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！