2016-08-23 6 views
0

最近私のアプリケーションにwebpackを組み込み、srciptタグでjsに変換されたすべてのタグファイルを読み込もうとしています。まだ暴動jsは、タグファイルをマウントすることはできません..同じソリューションですか?Webpackはriot jsファイルを解析していません

login_form.jsファイルを手動で読み込むと、riotは正しく読み込むことができます。

HTML:

<html> 
<body> 
    <script type="text/javascript" src="../public/libs/riot/riot.js"></script> 
    <script src="../public/dist/js.js"></script> 
    <login_form></login_form> 
</body> 

+0

あなたは[riotjs-ローダー](https://www.npmjs.com/package/riotjs-loader)を試したことがありますか?それは助けるかもしれない。 –

答えて

0

アンドリュー・ヴァンSlaarsは私がRiot.js +のWebPACKを始めるために使用される偉大なビデオを制作しました。

https://www.youtube.com/watch?v=UgdZbT-KPpY

彼はまたRiot.js +のWebPACKと "スターターキット" のgitリポジトリを提供します:https://github.com/avanslaars/riot-webpack-base

はどちらも非常に参考と良い出発点です。

package.jsonには、必要なものが表示されます。N.B. riotjs-loaderではなくtag-loaderの使用。私はタグローダーが私のために働くので、riotjs-loaderを試してみませんでした。

{ 
    "name": "riot-webpack-setup", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "dev": "webpack-dev-server" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "riot": "^2.3.11" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.3.17", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.3.13", 
    "tag-loader": "^0.3.0", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
    } 
} 

webpack.configファイルがで開始する非常に簡単です:

var path = require('path') 

module.exports = { 
    entry: './src/index.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    }, 
    module:{ 
    loaders:[ 
     { 
     test: /\.js$/, 
     loader:'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     }, 
     { 
     test: /\.tag$/, 
     loader: 'tag', 
     exclude: /node_modules/ 
     } 
    ] 
    } 
} 
0

WebPACKのための公式の暴動タグローダーがあります:https://github.com/riot/tag-loader

は、それが同様にリロードホットモジュールをサポートしています。

あなたのコード内で次に
module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.tag$/, 
     exclude: /node_modules/, 
     loader: 'riot-tag-loader', 
     query: { 
      hot: false, // set it to true if you are using hmr 
      // add here all the other riot-compiler options riotjs.com/guide/compiler/ 
      // template: 'pug' for example 
     } 
     } 
    ] 
    } 
} 

import riot from 'riot' 
import 'riot-hot-reload' 

// riot will have now a new riot.reload method!! 
関連する問題