2017-08-29 2 views
0

些細なwebpack 2プロジェクトで、私はこのUMDモジュールを使用しようとしています。https://github.com/Offirmo/simple-querystring-parser/blob/master/index.jswebpackでUMDモジュールを使用するには?

蒸散誤差はありません。

しかし、これはブラウザにこのエラーで終わる:

Uncaught TypeError: Cannot set property 'SimpleQuerystringParser' of undefined

WebPACKのラッピングはUMDスニペットを認識できないという環境を提供しているようです。

  • 私は「WebPACKのとUMDを消費する」ためのGoogleの検索WebPACKのドキュメント
  • 内の任意のヒントを見つけるcoulndn'tは
  • StackOverflowのはどちらか有用ではなかった興味深い結果が出ていませんでした。

ウェブパックでUMDライブラリをどのように使用できますか?

注:対象UMDライブラリは私のものですが、公式のUMDウェブサイトの正式なUMDスニペットを使用しています。どんな提案も大歓迎です。

+0

こちらの回答がお役に立ちましたか? https://stackoverflow.com/questions/14150203/is-it-possible-to-convert-requirejs-modules-to-commonjs-幸運を祈る! – iamjpg

+1

@iamjpgありがとうございますが、私が探しているものではありません。 UMDは合法で、webpackは変更なしでそれを消費できると期待しています(私はwebpackに適応しましたが、cf.私の答え...) – Offirmo

答えて

2

最後に、私はWebPACKの2環境下でUMDラッパーをdebbugedとを思い付くことができたもWebPACKの2で動作 UMDラッパーを改善:(要旨で利用可能ここhttps://gist.github.com/Offirmo/ec5c7ec9c44377c202f9f8abcacf1061#file-umd-js

// Iterating on the UMD template from here: 
 
// https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js 
 
// But experimentally improving it so that it works for webpack 2 
 

 
// UMD template from https://gist.github.com/Offirmo/ec5c7ec9c44377c202f9f8abcacf1061#file-umd-js 
 
(function (root, factory) { 
 
    \t var LIB_NAME = 'Foo' 
 
\t if (typeof define === 'function' && define.amd) { 
 
\t \t // AMD. Register as an anonymous module. 
 
\t \t define(function() { 
 
\t \t \t return (root 
 
\t \t \t \t ? root[LIB_NAME] = factory() 
 
\t \t \t \t : factory() // root is not defined in webpack 2, but this works 
 
\t \t \t) 
 
\t \t }); 
 
\t } else if (typeof module === 'object' && module.exports) { 
 
\t \t // Node. Does not work with strict CommonJS, but 
 
\t \t // only CommonJS-like environments that support module.exports, 
 
\t \t // like Node. 
 
\t \t module.exports = factory() 
 
\t } else if (root) { 
 
\t \t // Browser globals 
 
\t \t root[LIB_NAME] = factory() 
 
\t } else { 
 
\t \t throw new Error('From UMD wrapper of lib "' + LIB_NAME + '": unexpected env, cannot expose my content!') 
 
\t } 
 
}(this, function() { 
 
\t "use strict"; 
 
    
 
    \t return { 
 
\t \t ... 
 
\t } 
 
}))

、元の包装、はWebPACKの2作業ない:

(ここで https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.jsから)幸い

(function (root, factory) { 
 
    if (typeof define === 'function' && define.amd) { 
 
     // AMD. Register as an anonymous module. 
 
     define(function() { 
 
      return (root.returnExportsGlobal = factory()); 
 
     }); 
 
    } else if (typeof module === 'object' && module.exports) { 
 
     // Node. Does not work with strict CommonJS, but 
 
     // only CommonJS-like environments that support module.exports, 
 
     // like Node. 
 
     module.exports = factory(); 
 
    } else { 
 
     // Browser globals 
 
     root.returnExportsGlobal = factory(); 
 
    } 
 
}(this, function() { 
 
    "use strict"; 
 
    
 
    \t return { 
 
\t \t ... 
 
\t } 
 
}))

私はLIBの持ち主だったし、それを修正することができます。

関連する問題