2017-09-26 4 views
0

私はRequireJSプロジェクトからWebpackに移行しています。 後者は私には新しく、私はこれを学習の練習として使っています。Webpack 2:jQWidgetsのRequireJSのようなシミングですか?

shim: { 
    'jqxcore': { 
     exports: "$", 
     deps: ["jquery"] 
    }, 
    'jqxtree': { 
     exports: "$", 
     deps: ["jquery", "jqxcore"] 
    }, 
    'jqxbutton': { 
     exports: "$", 
     deps: ["jquery", "jqxcore"] 
    }, 
    'jqxsplitter': { 
     exports: "$", 
     deps: ["jquery", "jqxcore"] 
    }, 
    'jqxmenu': { 
     exports: "$", 
     deps: ["jquery", "jqxcore"] 
    } 
} 

をして、ちょうどそのような例えば「jqxsplitter」を必要: RequireJSでは、私はこのようなものを登録することができ

import "jqxsplitter" 

とスタッフが正しく登録され、ロードされるだろう。 今度は、thisthisのように、RequireJSからWebpackに移行する際に見つけたガイド/チュートリアル/チュートリアルをいくつか見ていました。 は、だから私は私のwebpack.config.jsにこのような何かをしようとしているものを洞察以下:どのように「の構文

"use strict"; 

// Required to form a complete output path 
const path = require("path"); 

// Plagin for cleaning up the output folder (bundle) before creating a new one 
const CleanWebpackPlugin = require("clean-webpack-plugin"); 

const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const webpack = require("webpack"); 

// Path to the output folder 
const bundleFolder = "./wwwroot/"; 

// Path to the app source code 
const appFolder = "./app/"; 

module.exports = { 
    // Application entry point 
    entry: { 
     main: appFolder + "index.ts", 
     vendor: [ 
      "knockout", 
      "jquery", 
      "jqxcore" 
     ], 
     jqxsplitter: "jqxsplitter" 
    }, 

    // Output file 
    output: { 
     filename: "[name].js", 
     chunkFilename: "[name].js", 
     path: path.resolve(bundleFolder) 
    }, 
    module: { 
     rules: [{ 
      test: /\.tsx?$/, 
      loader: "ts-loader", 
      exclude: /node_modules/ 
     }, { 
      test: /\.html?$/, 
      loader: "html-loader" //TODO: file-loader? 
     }], 
     loaders: [{ 
      test: /jqxcore/, 
      loader: "imports?jquery!exports?$" 
     }, { 
      test: /jqxsplitter/, 
      loader: "imports?jquery,jqxcore!exports?$" 
     }] 
    }, 
    resolve: { 
     extensions: [".tsx", ".ts", ".js"], 
     alias: { 
      "jqxcore": "jqwidgets-framework/jqwidgets/jqxcore", 
      "jqxsplitter": "jqwidgets-framework/jqwidgets/jqxsplitter" 
     } 
    }, 
    plugins: [ 
     new CleanWebpackPlugin([bundleFolder]), 
     new HtmlWebpackPlugin({ 
      filename: "index.html", 
      template: appFolder + "index.html", 
      chunks: ["main", "vendor"] 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "vendor", 
      filename: "vendors.js", 
      minChunks: Infinity 
     }) 
    ], 
    devtool: "source-map" 
}; 

関連部分は、(私は仮定)

module: { 
    loaders: [{ 
     test: /jqxcore/, 
     loader: "imports?jquery!exports?$" 
    }, { 
     test: /jqxsplitter/, 
     loader: "imports?jquery,jqxcore!exports?$" 
    }] 
}, 

ているそれはかなり明らかです輸入/輸出」は、RequireJSの「deps」と「輸出」に相当すると考えられる。私は私のindex.tsにファイル(アプリケーションルート)これを行うとき しかし:

import "jqwidgets-framework/jqwidgets/jqxsplitter"; 

を私は私のアプリを実行しているときにエラー「jqxBaseFrameworkが定義されていません」を取得します。 jQWidgetsのフォーラムでこのエラーの参照が見つかりましたが、本当に問題に取り組んでいないか、Angularを使用していないため自分の状況に当てはまらないAOTコンパイルのようなものがあります。

私はのこの質問をjQWidgesフォーラムで行ったことがありますが、これまでのところ実際の回答はありませんでした(2週間後)、jqxwhateverplugin.jsの前にjqxcore.jsをロードするという一般的な答えが1つのみです。 さて、明らかに、それは私がシミングを使って達成しようとしていることです。

アイデア?

答えて

0

私は深くダイビングして自分のためにそれを考え出した。 誰もが同じボートまたは類似のボートで自分自身を見つけるべき解決策はここにあります。

jQWidgetsスクリプトファイルjqxcore.jsを美しくすれば、通常は "jqxBaseFramework"と呼ばれるグローバル変数が作成されますが、これは当然自分のモジュール内でのみグローバルに公開されることはありません。そしてそこに問題がある。

ソリューションは、この設定を使用することです:

module: { 
    rules: [{ 
     test: /jqxcore/, 
     use: "exports-loader?jqxBaseFramework" 
    }, { 
     test: /jqxknockout/, 
     use: ["imports-loader?jqxBaseFramework=jqxcore,ko=knockout", "exports-loader?jqxBaseFramework"] 
    }, { 
     test: /jqxsplitter/, 
     use: "imports-loader?jqxBaseFramework=jqxknockout" 
    }] 
}, 
resolve: { 
    ... 
    alias: { 
     "knockout": "knockout/build/output/knockout-latest", 
     "jqxcore": "jqwidgets-framework/jqwidgets/jqxcore", 
     "jqxknockout": "jqwidgets-framework/jqwidgets/jqxknockout", 
     "jqxsplitter": "jqwidgets-framework/jqwidgets/jqxsplitter" 
    } 
}, 

私はそれをクリックすると、これはすべて理にかなっていると思います。 jqxcoreモジュールは、同じ名前のjqxBaseFramework変数をエクスポートするようになりました。

ノックアウトサポートで追加しました。 jqxknockoutは、2つのグローバル変数ko(knockout)とjqxBaseFrameworkが正常に動作することを期待しています。 これで、jqxknockoutがロードされるたびに、jqxcoreモジュールをロードし、そのエクスポートを "jqxBaseFramework"というモジュールローカル変数に割り当て、ノックアウトモジュールをロードし、そのエクスポートを "ko"というモジュールローカル変数に割り当てる必要があることをwebpackに伝えます" これは、次のコードをjqxknockoutに付加することと事実上同じです。jsスクリプト:

var jqxBaseFramework = require("jqxcore"); 
var ko = require("knockout"); 

これらの2つの変数が見つかったため、スクリプトを再度実行できるようになりました。 エクスポート・ローダーを追加して、jqxknockoutからjqxBaseFramework変数を処理し、拡張しました。

jqxSplitterは正常に動作するにはjqxCoreのみ必要ですが、私は常にノックアウトで使用したいと考えています。したがって、jqxSplitterのjqxCoreからjqxBaseFrameworkをインポートする代わりに、jqxKnockoutから取得するので、すべての部分が適切に配置されます。 だから今、私は何でもファイルにこのコードを追加したとき、私はにいる:

import "jqwidgets-framework/jqwidgets/jqxsplitter"; 

のWebPACKは、順番にらほらjqxcoreとノックアウトが必要になる、jqxBaseFrameworkされ、全体のことをjqxknockoutし、それのために輸出を必要とします美しく配線されています。

これが誰かを助けることを願っています!

関連する問題