Question

我使用Webpack编写了一个用Typescript编写的项目，我想问一下是否有可能改变，例如。我的bundle.js文件中嵌入的变量/对象？我的意思是这样的（没有Webpack是一种流行的方法）。

我的HTML文件：

<script src="bundle.js"></script>
<script>
    MyScript.init({width: 500});
</scipt>

我的webpack.config.js：

var path = require('path');

module.exports = {
    entry: './signature.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader' }
        ]
    }
}

Answer 1

修改

您可以通过添加MyScript并使用libraryTarget: "umd"或module.exports = MyScript让webpack自动导出export MyScript。

module.exports = { entry: './signature.ts', output: { filename: 'bundle.js', // add this: libraryTarget: 'umd', path: path.resolve(__dirname, '') }, resolve: { extensions: ['.ts', '.tsx', '.js'] }, module: { loaders: [ { test: /\.tsx?$/, loader: 'ts-loader' } ] } }

并在你的剧本中

var MyScript = { init: function (width) { if (width === undefined) { // set default width width = 400 } // your code here } } module.exports = myScript

这样，您的用户就可以自行决定他们如何调用您的模块。

更多信息：

UMD (Universial Module Definition)

libraryTarget

<强>旧

是的。这与webpack没有特别的关系。你想要这个：

window.MyScript = { init: function (width) { if (width === undefined) { // set default width width = 400 } // your code here } }

然后，您可以在html脚本标记中使用它。

<script src="bundle.js"></script> <script> MyScript.init({width: 500}); </scipt>

作为window - 对象的属性，您可以从任何地方访问您的代码。

但请记住，这违反了使用您需要webpack的javascript架构的目的。您希望防止污染全局范围，这是将模块绑定器与umd / cjs / amd一起使用的原因之一。

有关window的更多信息：

https://developer.mozilla.org/en/docs/Web/API/Window

https://www.w3schools.com/jsref/obj_window.asp

Webpack - HTML文件中的脚本配置

1 个答案: