代码之家  ›  专栏  ›  技术社区  ›  TheDomis4

Babel 7将ES6 node_module转换为ES5不起作用

  •  0
  • TheDomis4  · 技术社区  · 3 年前

    我无法理解为什么这不起作用。也许我在看医生时太草率了。在我的webpack项目中,我无法通过babel将ES6 node_module(ol aka openlayers)转换为es5。我正在使用 babel.config.js 正如babel在这个案例中所建议的那样。

    运行后 webpack build 这个 main.js bundle仍然具有类似箭头函数的ES6代码 const let

    如何转换 ol 通过babel 7封装到es5?

    //babel.config.js
    const path = require('path')
    
    module.exports = {
      presets: [
        '@babel/preset-react',
        [
          '@babel/preset-env',
          {
            targets: {
              browsers: 'IE 11, not dead'
            },
            useBuiltIns: 'entry',
            corejs: {
              version: '3',
              proposals: true
            }
          }
        ]
      ],
      plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-modules-commonjs',
        ['styled-components', { ssr: true }]
      ],
      exclude: [
        /\bcore-js\b/,
        /\bwebpack\/buildin\b/,
        /\node_modules\/(?!(ol)\/).*/
      ]
    
    }
    
    //webpack.config.js
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const CompressionPlugin = require('compression-webpack-plugin')
    
    module.exports = {
      entry: ['./src/index.js'],
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        publicPath: ''
      },
      target: 'web',
      devtool: 'source-map',
      module: {
        rules: [
          {
            test: /(?!node_modules).*\.jsx?$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'babel-loader?cacheDirectory=false',
                options: {
                  babelrc: false
                }
              }
            ]
          },
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader']
          },
          {
            test: /\.scss$/i,
            use: ['style-loader', 'css-loader', 'sass-loader']
          },
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[path][contenthash].[ext]',
                  publicPath: '../'
                }
              }
            ]
          },
          {
            test: /\.(otf)$/,
            use: {
              loader: 'url-loader'
            }
          },
          {
            test: /\.(eot|woff|woff2|ttf|svg)(\?[\s\S]+)?$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[path][contenthash].[ext]',
                  publicPath: '../'
                }
              }
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'src/template.html'
        }),
        new CompressionPlugin()
      ]
    }
    
    
    0 回复  |  直到 3 年前
    推荐文章