5

我正在开发简单的 js 应用程序，但遇到了与 babel 或/和 webpack 相关的问题 - 无法编译类（静态）属性，抛出错误：

ERROR in ./components/comp1.js
Module parse failed: Unexpected token (2:18)
You may need an appropriate loader to handle this file type.
| export class Comp1 {
|     static states = '123';
| }

我用这个问题简化了文件，只有两个 - 入口点 index.js：

import { Comp1 } from './components/comp1'
export const components = {
    Comp1
};

组件看起来像：

export class Comp1 {
    static states = {
        first: 1,
        second: 2
    };
}

最令人困惑的时刻是它在我的 OSX 机器上成功编译，但无法在 Win 10 PC 上运行。我不知道操作系统会如何影响......我在 package.json 中有以下依赖项：

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12"
  }

和 webpack.config：

module.exports = function(env) {
    var config = {
        entry: { 'bundle': './index.js' },
        output: {
            filename: '[name].js',
            path: __dirname + '/dist',
            libraryTarget: 'var',
            library: 'ns'
        },
        devtool: 'source-map',
        resolve: { extensions: ['.js', '.json'] },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    include: __dirname + '/components',
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader'
                    }
                }
            ]
        }
    };

    return config;
};

和.babelrc：

{
  "plugins": [ "transform-class-properties" ],
  "presets": [ "env" ]
}

UPD

我也尝试将 babel 设置移动到 webpack.config.js，但它没有帮助：

            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                    plugins: [ "transform-class-properties" ]
                }
            }
4

1 回答 1

3

终于找到了问题的原因——webpack配置出错了：

include: __dirname + '/components',

由于我index.js在根文件夹中的主文件不符合这个规则，我猜它会导致我上面描述的错误。因此，应该删除带有“include”选项的这一行以使一切正常

于 2018-03-17T11:58:54.410 回答