Question

使用Babel和Webpack，我生成了许多要在HTML中调用的ES6类。问题是，当我尝试在HTML源代码中使用这些类时，最终遇到未定义的标识符错误。 Babel + Webpack生成的类，变量等如何从外部访问？

Answer 1

我是Babel和Webpack的新手，在搜索中发现对这一问题有帮助的很少。这是我通过反复试验发现的结果对我有用：

我有像A_src.js这样的源文件：

let A_var = 123;
class A_Cls { ... }
export { A_Cls, A_var }  // the export statement to vital

在我的webpack.config.js中，我有：

module.exports = {
    ...
    entry: {
        ...
        A_src: './src/A_src.js',
        B_src: './src/B_src.js',
        ...
    },
    ,output: {
        path: path.resolve( __dirname, 'build' ),
        filename: '[name].js',
        library: '[name]',
        libraryTarget: 'var',
        pathinfo: true
    }

我发现要访问Babel + Webpack生成的类，必须在HTML中执行以下操作：

<!-- load the generated bundle -->
<script type="text/javascrip" src="app_bundle.js"></script>

<script type="text/javascrip">
    var html_var = A_src.A_var + 123;
    var A_Obj = new A_src.A_Cls();
</script>

希望这会有所帮助。如果有人有更好的方法和更好的解释，我们将感谢您的反馈。

如何从外部访问Babel生成的类，例如在HTML源代码中？

1 个答案: