1

我有一个项目使用 ES2015 作为代码，也使用 Riot。
（不过，Riot 组件不需要在 ES2015 中，只需要在旧 JS 中）
我也在使用 Webpack 来构建项目。

我遇到的问题是：

“./src/test-tag.tag
模块解析失败：.../tag-loader/index.js！.../riotjs-loader/index.js?{“type”：“none”}！ .../test-tag.tag Unexpected token (5:18) 您可能需要适当的加载程序来处理此文件类型。”

它抱怨是因为 riot 组件脚本代码的外观，即。一个函数必须只有 this 作为它的声明functionName() { /* the code */ }，即。没有关键字function。

这是我的完整项目

应用程序.js

import 'riot';

import 'test-tag.tag';

riot.mount("*");

测试标签.tag

<test-tag>

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

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

</test-tag>

索引.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_actionin 中的行test-tag.tag未注释，则会$ webpack导致在这个（非常巨大的）问题顶部引用的错误。

有什么办法可以让 webpack 接受标准的 riot 代码？
或者
有没有一种不同的方式可以让 webpack 不会抱怨的方式来定义 riot 内部函数？

4

1 回答 1

0

请记住，“类似 ES6”的方法语法是 Riot 添加的，不是标准的 ES6。

这将是标准的 js 语法

this.click_action = function() {
  alert('clicked!')
}

这就是 es6 语法

this.click_action = () => {
  alert('clicked!')
}

此外，您的按钮定义中有错字，它将是这样的

<button onclick={click_action}>Click Me</button>
于 2016-09-21T13:05:42.363 回答