babel-loader配置

发表于 | 更新于: | 分类于 |
字数统计: 485 | 阅读时长 ≈ 2

babel-loader配置

安装

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

npm 从 npm@3 之后不赞成自动安装peerDependencies，所有必须在package.json里明确指定 babel-core 这样的宿主依赖。

peerDependencies字段，主要用来供插件指定其所需要的主软件的版本。更多可以见这里

如果是从babel 5升级到 babel 6，可以看这份指导

使用

在webpack.config.js里配置是比较推荐的方式：

module: {
  loaders: [
    {
      test: /\.jsx?$/, // 匹配'js' or 'jsx' 后缀的文件类型
      exclude: /(node_modules|bower_components)/, // 排除某些文件
      loader: 'babel', // 使用'babel-loader'也是一样的
      query: { // 参数
        presets: ['es2015']
      }
    }
  ]
}

选项

选项的写法有两种

一种是查询字符串的方式：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel?presets[]=es2015'
    }
  ]
}

另一种是指定 query属性

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    }
  ]
}

babel-loader 还支持以下选项：

cacheDirectory: 默认值是 false。如果设置了这个参数，被转换的结果将会被缓存起来。当webpack 再次编译时，将会首先尝试从缓存中读取转换结果，以此避免资源浪费。如果该值为空(loader: ‘babel-loader?cacheDirectory’)，loader会使用系统默认的临时文件目录。

问题及优化

性能问题

  • 确保只转换尽可能少的文件，你可能匹配了过多的文件类型，或者匹配了所有的’.js’文件，你需要使用 exclude: /(node_modules|bower_components)/ 排除部分目录
  • 设置 cacheDirectory 参数也可以让你的 loader 性能提升2倍！

babel 给每个需要的文件注入helper扩展

您可以改为要求babel作为一个独立运行的模块，以避免重复。

下面的配置通过babel-plugin-transform-runtime插件可以禁用babel向每个文件注入helper

需要先安装插件 npm install babel-plugin-transform-runtime --save

loaders: [
  // the 'transform-runtime' plugin tells babel to require the runtime
  // instead of inlining it.
  {
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
      presets: ['es2015'],
      plugins: ['transform-runtime']
    }
  }
]
0%