2016-03-03 20 views
6

Webpackを初めて使用し、Angular2プロジェクト(https://angularclass.github.io/angular2-webpack-starter/)に使用しています。Webpack Angular 2にjQueryとSemantic-uiを含める方法

npm installの後に、jQueryとSemantic-uiが動作するのに苦労しています(.cssと.jsの両方)。私は両方のライブラリは、任意のモジュール形式になっていないので、それはやや問題だと仮定し、単にrequire(...)編またはimport

することはできません私は、通常通り、単にindex.htmlでそれらを含める必要がある、またはそこには「WebPACKの道」ですかこれをする ?

+0

あなたは解決策を見つけましたか? – Niyaz

答えて

4

は、次の手順に従います。npm install semantic-ui --save
をして、インストールプロセス中に指示に従ってください:

  1. がNPMを使用してセマンティック-UIをインストールします。
    src/assetsの下にインストールしました。
  2. gulp buildをディレクトリ内に使用する "ビルド"セマンティック。
    これはdistと呼ばれる/semanticの下に別のディレクトリを作成するか、インストールプロセス中に出力ディレクトリとして設定した名前を作成します。

  3. ここで、Semanticの.jsファイルと.cssファイル(新しく作成された/semantic/dist/ディレクトリにあるもの)を読み込むようにWebpackに指示する必要があります。
    angular-cliを使用してプロジェクトを生成し、ルートディレクトリに自分のconfigsをangular-cli.jsonというファイルに作成しました。
    それは次のようになります。JSONで "スタイル" と "スクリプト" のための
    https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
    ルックと、それぞれ意味の縮小さの.cssと.jsファイルを追加します。
    "assets/semantic/dist/semantic.min.css"

    "assets/semantic/dist/semantic.min.js"

  4. ようにSemantic-UIにはjQueryが必要です。

    );
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

  5. ビルドか、もう一度あなたのアプリを提供し、あなたはセマンティック-UIが正常に動作している必要があります
    私達はちょうど(/srcディレクトリ内)< .head>index.htmlのにスクリプトを追加します これが役立つことを願っています。

+0

私はこれらの手順に従っており、セマンティックUIスタイルはうまく読み込んでいますが、スクリプトは機能しません。私は 'accordion'を追加しましたが、クリックはセクションを開いたり閉じたりしません。私は何が欠けていますか? –

+0

「assets/semantic/dist/semantic.min.js」も追加しましたか? –

+0

はい、私はそれを含んでおり、index.htmlのjqueryも含んでいます –

関連する問題