javascript - webpack 4 和 babel 7 出错

标签 javascript webpack

我有一个使用 React 和 Webpack 作为构建系统的项目。我的开发依赖

devDependencies

"webpack": "^4.5.0",

webpack.config.js

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
...

我得到这个错误:

ERROR in ./node_modules/project/components/InfiniteScroller.jsx Module parse failed: Unexpected token (9:8) You may need an appropriate loader to handle this file type.

我做错了什么?

最佳答案

看起来您正在包含来自 node_modules 的未编译代码,出于效率原因,您的加载程序明确排除了编译 node_modules 代码(exclude:/node_modules/)。通常模块公开库的编译版本(通常在/dist 中,通常由模块的 package.json 中的“main”属性指向)。

如果你想解析node_modules中的代码,我建议你只解析node_modules/project,而不是所有模块,以提高效率。相应地修改您的排除语句,例如:exclude:/node_modules(?!\/project)/

您还需要确保使用必要的预设来处理文件(例如 babel-preset-envbabel-preset-react)和任何文件可能需要的插件(例如 transform-object-rest-spread 等)。

关于javascript - webpack 4 和 babel 7 出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49921571/

相关文章:

javascript - 如何将基于 IIFE 的 JavaScript 模块导入 Angular TypeScript 应用程序?

webpack - 使用 TerserWebpackPlugin 删除 console.log

javascript - 如何在单击 "Save"时更改表单,然后提交表单的最终版本?

javascript - bValidator 函数返回 true 时如何调用函数?

javascript - 返回 json 对象

node.js - Gulp/NPM Dev依赖项-网站完成后如何处理?

javascript - 使用 Grunt 和 Webpack 的结构

javascript - 递归调用使用 Promise 的 JS 函数( block 写入)

javascript - 链接到打开另一个选项卡的其他页面

angularjs - 使用 Webpack 和 AngularJS 在生产中图像 GET 抛出 404 错误