标签: babel-loader

我babel-loader在我的webpack.config.js文件中使用，但我注意到它删除了表单的许可注释：

/*! whatever **/

有没有办法保存它们？我注意到 babel 有一个comments选项，但我想这会保留任何评论，而不仅仅是许可评论。

const webpack = require('webpack');

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
            js: 'babel-loader'
          }
        }
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: false,
      }
    })
  ],
};

我已经尝试过：

plugins: [
    new webpack.optimize.UglifyJsPlugin({ …

我曾经create-react-app构建过一个项目，Babel 是随安装一起打包的。通常.babelrc文件位于项目的根目录中，但我在那里没有看到。我需要修改文件中的预设之一，但似乎找不到它。

我需要手动创建.babelrc文件还是它已经包含在内？如果是这样，文件的位置是什么？

我正在编写使用和webpack.config.js来将 typescript（更准确地说是 tsx）转译为 ES5 。我有两个问题：tsloaderbabel-loader

babel-loader1）即使tsloader输出ES5文件，我们还需要吗？2)当目标是 时设定是否
有意义？compilerOptions.moduletsconfig.jsones6es5

tsconfig.json如下：

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "jsx": "react"
  }
}

提前致谢。

我正在开发简单的 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 上运行。我不知道操作系统会如何影响……我在 …

到目前为止，我已经尝试了所有能找到的方法，但仍然收到错误“导出未定义”。

我正在使用 ReactJS.NET（适用于 NetCore2），这是强制性的，否则我的整个应用程序将无法在 NetCore2 下加载。

这是我的.babelrc

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "add-module-exports",
    "@babel/plugin-proposal-class-properties",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": true
      }
    ]
  ]
} 

旧版 babel 和“add-module-exports”的一切都运行良好。babel 7 有替代品吗？

我正在尝试延迟加载一些 React 组件，如下所示：

节点：v10.15.2

const Library = React.lazy(() => import('./components/Library'))`

我的错误：

Module parse failed: Unexpected token (51:9)
You may need an appropriate loader to handle this file type.
|
| var Library = React.lazy(function () {
>   return import('./components/Library');
| });

网页包配置：

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    options: {
      presets: ['@babel/env', '@babel/react', '@babel/preset-flow'],
      plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-syntax-throw-expressions',
      ],
    },
    loader: 'babel-loader?cacheDirectory',
  },
},

package.json

"dependencies": {
    "@babel/runtime": "^7.1.2",
    "axios": "^0.18.0",
    "babel-cli": "^6.26.0",
    "css-modulesify": "^0.28.0",
    "hls.js": …

我正在将 React 应用程序的核心组件提取到一个单独的组件库中，以供其他客户端应用程序使用。这些组件使用 SVG 图标，该图标已经通过 babel-loader 在原始应用程序中运行。

然而，由于组件是用 Typescript 编写的，据我所知，我需要ts-loader该库正常工作，即使我无法测试它，因为我什至无法编译该库。为了能够导出 SVG，我另外babel-loader将babel-plugin-named-asset-import.

这是我的项目结构：

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 config\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webpack.config.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 global.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 icons\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 upload.svg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 bar\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 foo\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Stuff.ts\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n

webpack.config.json：

const path = require("path");\n\nmodule.exports = {\n  entry: "./index.ts",\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        use: {\n          loader: "ts-loader",\n        },\n        exclude: …

我在尝试在项目中实现 Typescript 时遇到了一些麻烦。

• 使用 Webpack 和 Babel 转译和捆绑文件
• babel-loader与使用@babel/preset-typescript
• 不使用tsc

这些是我的配置。

webpack.dev.js

const config = {
  // (...) BUNCH OF OTHER CONFIG LINES
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,               // USE THE babel-loader FOR THESE FILE EXTENSIONS
        include: path.resolve(__dirname, "src"),
        use: ['babel-loader']
      }
    ]
  }
}

module.exports = config;

babel.config.js

module.exports = function (api) {

  let presets = [];
  let plugins = [];

  presets = [                                 // NOTE: PRESET ORDER IS LAST TO FIRST
    [
      "@babel/preset-env", …

我们如何将现代 JavaScript 编译成可与 Internet Explorer 11 (ie11) 一起使用的向后兼容的 JavaScript 包？具体来说，我们如何使用最新版本的 Webpack 5 和 Babel 7 做到这一点？