首页 > 解决方案 > babel 需要,webpack 没有解决

问题描述

由于“useBuiltIns:usage”,Babel-loader 添加了“require”语句,webpack 将它们转录为 import 语句但不解析它们。导致 bundle.js 中出现以下内容和浏览器中的错误:

import "core-js/modules/es6.function.name"

我正在使用 script-laoder 来捆绑它们,它将每个文件评估为字符串。我只是不知道如何告诉 webpack/script-loader 删除导入语句并将模块包含在包中。

webpack.config.js:

module.exports = {
  mode: "production",
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js']
  },
  entry: {
    website: [
      jsPath("babel-helpers.js"), // generated from babeL
      jsPath('testfolder/test.js'),
    ]
  },
  module: {
    rules: [ //executed bottom to top!
              {
                test: /\.js$/,
                use: [ 'script-loader' ]
              },
              {
                test: /\.ajs$/,
                exclude: [/\.min\.js$/, /node_modules/],
                use: {
                    loader: 'uglify-es-loader',
                    options: {
                      //parse: {},
                      //compress: {},
                      //mangle: true, // Note `mangle.properties` is `false` by default.
                    }
                }
              },
              { 
                test: /\.js$/, 
                exclude: [/\.min\.js$/, /node_modules/, /babel-helpers/], // exclude babel-helpers or error.
                loader: 'babel-loader', 
                // options: { //uses config from .babelrc file when not specified here.
                //   presets: ['@babel/preset-env']
                // }
              },
              {
                test: /\.js$/,
                exclude: [/\.min\.js$/, /node_modules/, /babel-helpers/],
                loader: 'string-replace-loader',
                options: {
                  multiple: [
                     { search: 'process.env.NODE_ENV', replace: JSON.stringify('production') },
                  ]
                }
              }
    ]
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, jsFolder),
    libraryTarget: 'umd',
    library: 'add'
  }
};

包.json

"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/plugin-external-helpers": "^7.2.0",
"babel-loader": "^8.0.6",
"script-loader": "^0.7.2",
"string-replace-loader": "^2.2.0",
"uglify-es-loader": "^3.0.4",
"webpack": "^4.36.1",
"webpack-cli": "^3.3.6"

.babelrc

{
    "presets": [
      [
        "@babel/env",
          {
          "useBuiltIns": "usage",
          "targets": 
            {
              "edge": "17",
              "firefox": "60",
              "chrome": "67",
              "safari": "11.1",
              "ie": "11"
            }
          }
      ]
  ],
  "plugins": [
    "@babel/plugin-external-helpers"
  ]
  }

标签: javascriptwebpackbabeljsbabel-loader

解决方案


推荐阅读