Question

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

我得到的问题是：

“./src/test-tag.tag中的错误” 模块解析失败： ... /标签装载机/ index.js ... / riotjs装载机/ index.js { “类型”： “无”}！？！？/测试tag.tag 意外的令牌（5:18）您可能需要一个合适的加载器来处理这个文件类型。“

由于暴乱组件脚本代码的外观，即抱怨。一个函数必须具有它的声明functionName() { /* the code */ }，即。没有关键字function。

这是我的完整项目

app.js

import 'riot';

import 'test-tag.tag';

riot.mount("*");

测试tag.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_action中的test-tag.tag行被取消注释，那么$ webpack会导致在此（可怕的巨大）问题的顶部引用错误。

有什么方法可以让webpack接受标准的防暴代码吗？
OR
有没有不同的方式我可以用webpack不会抱怨的方式定义防暴内部功能？

Answer 1

请记住＆＃34; ES6喜欢＆＃34;方法语法是Riot添加的东西，不是标准的ES6。

这将是标准的js语法

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

这就是es6语法

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

你的按钮定义中也有拼写错误，就像这样

<button onclick={click_action}>Click Me</button>

使用Riot with Webpack和Babel for es2015时模块解析失败

这是我的完整项目

1 个答案: