web-dev-qa-db-ja.com

エクスポートされた関数をbabelとwebpackを使用してグローバルスコープに公開する方法

エクスポートされた関数がグローバルスコープで使用できるように、webpackとbabelを使用してコードをコンパイルするにはどうすればよいですか。

したがって、たとえば：

_export function test(){console.log('test')}
_

window.test()で利用できるはずです。

_babel -d_を実行すると、期待どおりの結果が得られます。

_'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});
exports.test = test;

function test() {
  console.log('test');
}
_

しかし、webpackの出力は次のようになります。

_!function(e) {
  function t(r) {
    if (o[r])return o[r].exports;
    var n = o[r] = {exports: {}, id: r, loaded: !1};
    return e[r].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
  }

  var o = {};
  return t.m = e, t.c = o, t.p = "", t(0)
}([function(e, t) {
  "use strict";
  function o() {
    console.log("test")
  }

  Object.defineProperty(t, "__esModule", {value: !0}), t.test = o
}]);
_

end test関数はグローバルスコープでは使用できません。

webpackbabeljs
11
Andreas Köberle

チェックアウト： https://webpack.github.io/docs/library-and-externals.html#examples

library出力プロパティをグローバルをラップしたい名前に設定すると、次のように呼び出すことができます：YourLibrary 。test（）;

module.exports = {
    entry: ['./_js/script.js'],
    output: {
       library: 'YourLibrary',
        path: __dirname,
        filename: './build/script.js'
    }
4
glued

グローバルwindowオブジェクトにプロパティを簡単に設定できます。これにより、オブジェクトがグローバルスコープに公開されます。

function test() {
  console.log('test');
}

window.test = test;

ライブラリを表さず、グローバルスコープで動作する一部の操作または機能のみを表すコードを開発している場合は、受け入れられた回答に記載されているようにライブラリ出力プロパティを設定するよりも、この方法をお勧めします。

7
Edgar Alloro