1

コードにES2015を使用し、Riotも使用しているプロジェクトがあります。
(ただし、Riot コンポーネントは ES2015 である必要はありません。古い JS だけです)
プロジェクトのビルドには Webpack も使用しています。

私が得ている問題は次のとおりです。

"ERROR in ./src/test-tag.tag
Module parse failed: .../tag-loader/index.js!.../riotjs-loader/index.js?{"type":"none"}! .../test-tag.tag 予期しないトークン (5:18) このファイル タイプを処理するには、適切なローダーが必要な場合があります。"

暴動コンポーネントのスクリプトコードの見た目が原因で、不平を言っています。関数は、宣言のためにこれだけを持つ必要がありますfunctionName() { /* the code */ }。キーワードはありませんfunction。

ここに私の完全なプロジェクトがあります

app.js

import 'riot';

import 'test-tag.tag';

riot.mount("*");

テストタグ.タグ

<test-tag>

    <h1>This is my test tag</h1>
    <button onclick{ click_action }>Click Me</button>

    <script>
         //click_action() { alert('clicked!'); }
    </script>

</test-tag>

index.html

<html>
<head></head>
<body>

    <test-tag></test-tag>
    <script src="app_bundle.js"></script>

</body>
</html>

パッケージ.json

{
  "name": "riot_and_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015-riot": "^1.1.0",
    "riot": "^2.5.0",
    "riotjs-loader": "^3.0.0",
    "tag": "^0.3.0",
    "tag-loader": "^0.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var webpack = require('webpack');

const path = require('path');
const PATHS = {
    src: path.join(__dirname + '/src'),
    dist: path.join(__dirname + '/build'),
};



module.exports = {
    entry: [path.join(PATHS.src, '/app.js')],

    resolve: {
        modulesDirectories: ['node_modules', '.'], 
        extension: [ '.js' ] 
    },

    output: {
        path: PATHS.dist,
        filename: 'app_bundle.js'
    },


    plugins: [
        new webpack.ProvidePlugin({
          riot: 'riot'
        })
    ],


    module: {

        preLoaders: [
          { test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' } }
        ],

        loaders: [

            {
              test: /\.js$/,
              exclude: /(node_modules)/,
              loader: 'babel', 
              query: {
                presets: ['es2015']
              }
            },

            { test: /\.tag$/, loader: 'tag' },
        ]
    }

};

これで、コードがコメントアウトされているため、ボタンをクリックしても何も起こらないことを除いて、すべて期待どおりに機能します。
のclick_action行test-tag.tagがコメント解除されている場合$ webpack、この (恐ろしく巨大な) 質問の上部に引用されているエラーが発生します。

標準の暴動コードを受け入れるように webpack を取得する方法はありますか?
または
、webpack が文句を言わない方法で riot の内部関数を定義できる別の方法はありますか?

4

1 に答える 1