标签: babel-loader

我正在学习构建系统如何在 JavaScript 中工作。如果babel-loader是翻译器翻译React成JavaScript，为什么它是插件的一部分webpack？

不是transpiling和bundling是一个单独的过程吗？

是否有资源可以解释所有这些框架如何组合在一起并使构建系统详细工作？我似乎只能在官方文档中找到高级概述。

webpack5支持topLevelAwait，只需添加以下选项：

//webpack.config.js

module.exports = {
  //...
  experiments: {
    topLevelAwait: true
  },
};

现在我们可以愉快地使用顶级等待，如下所示：

import Test from './Test';

const _Test = await import("./Test");
console.log(_Test);

效果很好。

但是当我添加 babel-loader 时它将不起作用：

module.exports = {
  //...
  experiments: {
    topLevelAwait: true
  },
  module:{
    rules:[
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
};

它抛出一个错误：

'await' is only allowed within async functions

我怎么解决这个问题？

我需要 topLevelAwait 和 babel-loader。

安装所有node_modules时遇到此问题。这让我发疯。

babel-loader@7.1.2需要webpack @ 2的同位体|| 3，但未安装。

这是我的package.json文件

{
  "name": "react-router-firebase-auth",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react-scripts": "0.9.5"
  },
  "dependencies": {
    "@atlaskit/button": "3.0.0",
    "@atlaskit/css-reset": "1.1.4",
    "@atlaskit/field-text": "4.0.1",
    "@atlaskit/modal-dialog": "2.1.1",
    "@atlaskit/page": "4.0.1",
    "@atlaskit/util-shared-styles": "2.3.1",
    "@shopify/polaris": "^1.5.1",
    "babel-eslint": "^7.0.0",
    "bootstrap": "^3.3.7",
    "eslint": "3.16.1",
    "eslint-plugin-react": "6.4.1",
    "express": "^4.16.1",
    "firebase": "^4.5.0",
    "firebase-admin": "^5.4.1",
    "firestore": "^1.1.6",
    "fixed-data-table": "^0.6.4",
    "griddle-react": "^1.8.1",
    "jquery": "^3.2.1",
    "node-localstorage": "^1.3.0",
    "nodemon": "^1.12.1",
    "react": "^15.5.3",
    "react-bootstrap": "^0.31.3",
    "react-bootstrap-button-loader": "^1.0.8",
    "react-bootstrap-navbar": "^1.1.0",
    "react-data-grid": "^2.0.59", …

我可以使用 Webpack 将 Src 文件夹中的代码转换为构建文件夹吗？我不想使用模块捆绑器来转换代码，同时维护 Src 文件夹中的文件夹结构

 src
   - component (folder)
   - utils . (folder)
     index.js 

 build
    - component (folder)
    - utils . (folder)
      index.js

以下是一些以前在 Babel 6 中适用的功能，但在 Babel 7 中遇到了问题。我正在尝试将（默认）类导出为库。目前，当我尝试导入它时，出现以下错误。

未捕获的语法错误：请求的模块“./dist/datastore.js”不提供名为“default”的导出

我的配置几乎与以前的配置相同，只是使用 Babel 7 进行了更新。

来自 Webpack 的部分：

output: {
  path: `${__dirname}/dist`,
  filename: `${moduleName}.js`,
  library: 'datastore',
  libraryExport: 'default',
  libraryTarget: 'umd',
  umdNamedDefine: true
},

我的入口点的位：

import DataStore from './datastore';

export default DataStore;

.babelrc 中的位：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      },
      "modules": false
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

有人有主意吗？

我正在尝试学习如何编写 React 应用程序并从头开始设置。

我一直在努力奔跑webpack --config webpack.dev.config.js。我不断收到此错误。我尝试过使用不同的加载器和预设。

我的设置有什么问题吗？是不是我的 npm 节点模块已经过时了？

我尝试更新所有预设、加载器甚至 babel 本身。

错误：

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
    at createDescriptor (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)

webpack.dev.config.js：

var path = require('path');

module.exports = {
  mode: 'development',
  // context: path.resolve(__dirname, 'src'),
  entry: path.resolve(__dirname,'src/index.js'),
  output: {
    filename: 'main.js',
    libraryTarget: "commonjs2"
  },
  module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: [
           { …

Uncaught ReferenceError: regeneratorRuntime is not defined尝试使用超级代理进行 api 调用时出现此错误。

目前我正在使用 react 17、webpack 5 以及 css 模块和所有最新的包。

包.json

{
  "dependencies": {
    "date-fns": "^2.16.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "superagent": "^6.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@dr.pogodin/babel-plugin-react-css-modules": "^6.0.10",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "eslint": "^7.16.0",
    "html-webpack-plugin": "^5.0.0-beta.1",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.1",
    "postcss-scss": "^3.0.4",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.0"
  } …

我已经使用react-leaflet有一段时间了，几周后我删除了node_modules内的文件并重新安装了它们，我根本没有触及react-leaflet版本，但是当我尝试运行该项目时，它给了我一个错误。

./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外的标记 (10:41) 文件已使用这些加载器处理：

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js 您可能需要一个额外的加载器来处理这些加载器的结果。| useEffect(function updatePathOptions() { | if (props.pathOptions !== optionsRef.current) {

  const options = props.pathOptions ?? {};

Run Code Online (Sandbox Code Playgroud)

| element.instance.setStyle(选项); | optionsRef.current = 选项；

尝试从 GitHub 克隆我的项目后（必须在本地删除我）。我开始收到以下错误。

error  in ./src/App.vue?vue&type=template&id=7ba5bd90&ts=true

Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
* ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { resolveComponent as _resolveComponent, createVNode as _createVNode, 
withCtx as _withCtx, openBlock as _openBlock, createElementBlock as 
_createElementBlock } from "vue"
| 
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: 
any,$options: any) {
|   const _component_router_view = _resolveComponent("router-view")!
|   const _component_AppLayout = _resolveComponent("AppLayout")! …

我有 2 个包：“共享”和“网络”。他们都使用 TypeScript。我在“web”中使用带有 babel-loader 的 webpack。当我符号链接“共享”时，它无法编译它的 TypeScript。

此问题建议symlinks: false在 webpack.config.js 中使用，但不起作用：https : //github.com/webpack/webpack/issues/1643

文件夹结构：

root
?
????shared
?   ?   package.json
?   ?   UseMe.ts
?   
????web
    ?   .babelrc
    ?   index.ts
    ?   package.json
    ?   tsconfig.json
    ?   webpack.config.js

共享\package.json

{
  "name": "shared",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.6.4"
  }
}

共享\UseMe.ts

class UseMe {
    prop: string
}

export default UseMe;

网页\.babelrc …