webpack——Babel

最新推荐文章于 2024-09-23 09:42:46 发布

金胜涛

最新推荐文章于 2024-09-23 09:42:46 发布

阅读量295

点赞数 1

分类专栏：前端框架 webpack

本文链接：https://blog.csdn.net/weixin_44054088/article/details/89891766

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

框架

9 篇文章 0 订阅

订阅专栏

webpack

6 篇文章 0 订阅

订阅专栏

babel

babel是一个JavaScript编译器，可以把EcmaScript6编译成EcmaScript5
babel可以独立使用，但是独立使用没有意义，一般是和webpack结合到一起使用的

安装依赖：

npm install --save-dev babel-loader babel-core babel-preset-env

配置：

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,//不转换node_modules中的模块
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

babel-polyfill

默认babel只转化语法
我么可以使用babel-polyfill来转换EcmaScript6中的API

安装依赖：

npm i -D babel-polyfill

配置：

entry: ['babel-polyfill','./src/main.js'],

这样的话就会在打包的结果中提供一个垫脚片用以兼容低版本浏览器中不支持的API。

babel-runtime 解决代码重复问题

在打包过程中，babel会在某个包提供一些工具函数，而这些工具函数可能会重复出现在多个模块，这样会导致打包体积过大，所以babel提供了一个babel-transform-runtime来解决这个打包体积过大的问题。

安装：

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save

配置：

{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins:['transform-runtime']//配置项
                    }
                }
            }