2016-08-23 24 views
0

我最近在我的應用程序中實現了webpack,並嘗試加載所有通過srcipt src標記轉換爲js的標記文件。仍然暴亂js不能掛載標籤文件..任何解決方案相同?Webpack不解析暴動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:https://github.com/avanslaars/riot-webpack-base

兩者都是非常有益的,一個很好的起點。

package.json顯示需要什麼 - N.B.使用tag-loader而不是riotjs-loader。我發現標籤加載器爲我工作,所以沒有嘗試riotjs加載器。

{ 
    "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!!