标签: babel-loader

我在 IE11 上生成的 webpack 包有问题。我检查了捆绑包，这是由于一些箭头函数。

它来自一个 node_module 包：lite-id

我的 webpack 配置：

var config = {
    devtool: 'source-map', 
    entry: ["babel-polyfill", APP_DIR + '/index.js'],
    output: {
        path: BUILD_DIR,
        filename: 'BundleNodeJs.js',
        libraryTarget: "umd",    
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css', '.scss'],
        symlinks: false
    },
    [...]
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules|bower_components/,
                loader: "babel-loader",
                options: {
                    presets: ['env', 'react', 'stage-2']
                }
            },
        ]
    }
};

在此节点模块中将箭头函数转换为常规函数的好方法是什么？

这是这个答案的后续。

我有一些 3rd 方代码（react 组件），我将它们捆绑为 ES 模块（使用pkg.module入口点）。这很好用（你得到模块连接和树摇动），但包含的代码没有用 babel 转译，因为按照大多数配置示例，我node_modules在 webpack 配置的 babel-loader 部分排除了这样的：

{
    ...
    module: {
        rules: [
            {
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    ...
                }
            }
        ]
    },
    ...
}

所以，当我运行 webpack 时，我收到了意外的令牌错误。根据链接的答案，我从使用 an 切换exclude到 aninclude以选择性地引入一些这样的包node_modules：

{
    ...
    module: {
        rules: [
            {
                include: [/node_modules\/@my-scope/, /src/],
                use: {
                    loader: 'babel-loader',
                    ...
                }
            }
        ]
    },
    ...
}

这似乎对我有用（当我运行 webpack 时不再出现意外的令牌错误），但我不能 100% 确定它正在做我认为的事情。

这个解决方案看起来正确吗？有没有更好的办法？

希望你们一切都好:)

我正在使用 Nodejs 在 REST API 服务器上工作，在完成 alpha 版本后，我想用构建工具为它创建一个包，虽然我在某个时候成功捆绑了应用程序仍然无法使 Express Rest API 脚本成为捆绑。由于我对 Webpack 并没有真正的经验，我很确定我做错了什么，必须有办法做到这一点。你也可以在下面看到我的 webpack.config.js、.babelrc 和 package.json：

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var module_dir = `${__dirname}/node_modules`;
const path = require('path');

module.exports = {
  entry: {
    app: [
      'babel-polyfill',
      './index.js',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.bundle.js',
  },
  module: {
    rules: [{
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
           presets: ['env', 'stage-0']
        }
    }]
  },
  resolveLoader: {
    modules: [
          __dirname + …

使用 babel 7.5.5、core-js 3.1.4 和 webpack 4.38.0，我如何从转译中排除 core-js？

我不想node_modules完全排除，因为我有需要转译的库

如果我使用exclude: /node_modules\/(core-js)/，一个 core-js 模块会抛出

类型错误：$ 不是函数

这让我有另外两个选择。

1. 改用包含，包含我的 src 目录和需要一一转换的每个依赖项
2. 使用useBuiltIns: entry而不是使用，因为在这种情况下exclude: /node_modules/\(core-js)/有效，并且importcore.js 位于 main.js 的顶部

这两个选项对我来说似乎都不是很好的解决方案，因为usage自 7.4以来“不再是实验性的”。

有什么办法可以使用用法让它工作吗？它是 babel-loader 还是 babel 中的错误？还是我的配置有问题？

这是我的 Webpack 配置：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'production',
    entry: {
        main: ['./src/main'],
    },
    output: {
        path: path.resolve(__dirname, './build/'),
        publicPath: '/build/'
    },
    module: {
        rules: [
            {
                test: /\.js$/, …

我在使用 webpack 和 babel 设置我的 React 应用程序时遇到了这个错误。我尝试更改 babel 的版本，但仍然出现相同的错误。我不明白问题出在哪里。

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/arslan/Downloads/code/node_modules/babel-preset-es2015/lib/index.js
    at createDescriptor (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:120:22)
    at loadPrivatePartialConfig 

这是我的 Index.jsx 文件，它是根文件。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './store'
import …

当我尝试运行我的应用程序时出现此错误，我使用了我一直使用的所有相同的依赖项，所以我对此感到非常困惑。我试过删除我的 package-lock.json 和 node 模块几次，并尝试在整个 repo 中搜索 /src/data 并没有找到任何东西。

更多错误信息：

./src/index.js 中的错误

模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：错误：找不到模块“./src/data”

这是错误中的 ./src/index.js

import { render } from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import store from './store';

render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);```

Anyone have any recommendations?

我的项目有一个 monorepo 结构，如下所示：

babel.config.js
  a-something
  b-something

我的项目根目录中有 babel 配置文件，包a-something和b-something. 在包内a-something我有以下 webpack 配置：

const path = require('path')

module.exports = {
  target: 'node',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: {
          loader: 'babel-loader',
          options: {
            rootMode: 'upward'
          }
        },
        include: [
          path.resolve(__dirname, 'src'),
          /node_modules\/a-/,
          /node_modules\/b-/
        ]
      }
    ]
  }
}

在包内，a-something我有以下 package.json：

{
  "name": "a-something",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", …

的两个不同的检出相同导致两个不同版本的代码@巴贝尔/运行时为同一版本的Babel

@babel/runtime 的一个版本是“7.6.3”，其中包含commonJS模块导出

但它的另一个版本是“7.9.2”，其中包含ES2015模块导出 [这个导致问题]

  export default function _extends() {
  ^^^^^^
  SyntaxError: Unexpected token export
      at Module._compile (internal/modules/cjs/loader.js:721:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Module.require (internal/modules/cjs/loader.js:690:17)
      at Module.Hook._require.Module.require (/Users/justdial/Desktop/NewT/microsite-b2b/node_modules/require-in-the-middle/index.js:80:39)
      at require (internal/modules/cjs/helpers.js:25:18)
      at Object.call (/Users/<abs-path>/server/webpack:/external "@babel/runtime/helpers/esm/extends":1:18)
      at r (/Users/<abs-path>/server/webpack:/webpack/bootstrap:25:22)

我正在为我的应用程序编写第一个测试，然后安装 Jest。

我的测试非常简单，所以我不认为我得到的错误来自那里。

import React from 'react';
import renderer from 'react-test-renderer';
import FancyInput from './FancyInput';

describe('FancyInput', () => {
  it('should render correctly', () => {
    expect(
      renderer.create(
        <FancyInput />
      )
    ).toMatchSnapshot();
  });
});

运行测试时Support for the experimental syntax 'jsx' isn't currently enabled 也出错

`Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.`

我的 webpack 文件有以下内容：

rules: [ …

我正在尝试使用 babel 配置 webpack (5)，使用 babel-loader 转译为 ES5。不幸的是，输出不一致。基本上，它分为两部分：

1. 一些 polyfill：

2. 我的代码：

如您所见，第一部分包含箭头函数，第二部分没有。我试图将@babel/plugin-proposal-class-properties和添加@babel/plugin-transform-arrow-functions到我的.babelrc文件中，但class-properties缺少（启用调试）。

我必须承认，我不确定这class-properties是问题所在，但在谷歌上花了几个小时后，这是我最好的尝试，所以也许我对问题的根源是错误的。

网络包文件：

export default {
  entry: './src/index.js',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '..', '..', 'dist'),
    filename: 'bundle.prod.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

.babelrc 文件：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": {
          "version": 3
        },
        "useBuiltIns": "usage",
        "debug": true
      }
    ]
  ],
  "plugins": …