我有一个项目，代码使用 ES2015，也使用 Riot。
（然而，Riot 组件不需要在 ES2015 中，只需旧的 JS 即可）
我还使用 Webpack 来构建项目。
我遇到的问题是：
“./src/test-tag.tag 中出现错误
模块解析失败： .../tag-loader/index.js!.../riotjs-loader/index.js?{"type":"none"}!.../test-tag.tag 意外的令牌 (5:18) 您可能需要适当的加载程序来处理 此文件类型。”
它之所以抱怨是因为防暴组件脚本代码的外观，即。函数的声明必须只有 this
functionName() { /* the code */ }functionapp.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>
index.html
<html>
<head></head>
<body>
<test-tag></test-tag>
<script src="app_bundle.js"></script>
</body>
</html>
package.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_actiontest-tag.tag$ webpack有什么方法可以让webpack接受标准的防暴代码吗？
或
有没有一种不同的方式可以让 webpack 不会抱怨的方式定义 riot 内部函数？
请记住，“类似 ES6”的方法语法是 Riot 添加的，不是标准 ES6。
这将是标准的 js 语法
this.click_action = function() {
alert('clicked!')
}
这就是 es6 语法
this.click_action = () => {
alert('clicked!')
}
你的按钮定义也有一个拼写错误，它会是这样的
<button onclick={click_action}>Click Me</button>