Question

我在将webpack添加到现有的React项目时遇到了问题。以前，该项目是使用next.js在服务器端呈现的。但是，我的webpack配置似乎有问题。每当我尝试构建我的项目时，它都会因看似有效的ES6代码而失败：

./src/components/shared/menu/component.js中的错误模块构建失败：SyntaxError：意外的令牌（8:12）

   6 |
   7 | export default class Menu extends PureComponent {
>  8 |   propTypes = {
     |             ^
   9 |     items: PropTypes.arrayOf(PropTypes.shape({
  10 |       name: PropTypes.string.isRequired,
  11 |       action: PropTypes.func.isRequired,

我的webpack.config.js

    const path = require('path');

module.exports = {
    entry: './src/pages/index/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { 
                test: /\.js?$/, 
                loader: 'babel-loader', 
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                  }           
            },
            {
                test: /\.scss$/,
                use: [ 
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS
                 ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist")
    }
};

我的.babelrc

{ "presets": ["es2015", "react"] }

我已经尝试过搜索SO和谷歌，但找不到其他人遇到同样的问题。请指教！谢谢！

Answer 1

1）运行：.babelrc

2）更新{ "presets": ["es2015", "react"], "plugins": ["transform-class-properties"] }文件：

static

这样，babel也将转换自述文件中指定的类属性：compareDocumentPosition

此外，确保在类中定义propTypes时使用关键字files = list_files(mypath) # list of files to process csv_rows = None result = mp.Queue() #result queue from multiprocessing module pool = mp.Pool(4) t = pool.map_async( partial(process_file, result), files) t.wait() # it doesn't wait HERE ... program exits immediately - no errors（以便它将在类本身上声明，而不是在其原型上声明）

Answer 2

使用babel polyfill插件，并在入口点之前将其包含在webpack中，这意味着将入口点作为数组，并且第一个元素是＆＃39; babel-polyfill＆＃39;第二个元素是你的index.js

您也可以要求或导入babel-polyfill作为第一行index.js，但只需要在webpack或索引文件中使用它。

Webpack没有构建ES6类缺少配置问题

2 个答案: