webpack - babel配置

yunhao 发布于2019-08-22 16:00 / 2774人阅读

摘要：配置是一个编译器，是前端开发中的一个利器。其中，插件是为了告诉只编译批准的内容，相当于及最新版本。安装用法将下面内容添加到文件中更多细节参考插件。

webpack - babel配置

babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使我们在开发中可以使用最新的javascript语法。

通过构建和babel，可以使用最新js语法进行开发，最后自动编译成用于浏览器或node环境的代码。

webpack中使用babel

配合webpack使用babel前，需要首先使用npm init初始化一个项目，npm install -g webpack安装webpack（全局安装是为了在命令行使用webpack命令）。

安装babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env
其中，babel-preset-env插件是为了告诉babel只编译批准的内容，相当于babel-preset-es2015, es2016, es2017及最新版本。通过它可以使用最新的js语法。

配置webpack.config.js

在webpack配置文件中配置bable-loader

module: {
    rules: [
        {
            test: /.js$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        ["env",{
                            targets: {
                                browsers: ["> 1%", "last 2 versions"]
                            }
                        }]
                    ]
                }
            },
            exclude: "/node_modules/"
        }
    ]
}

其中，exclude是定义不希望babel处理的文件。targets是presets的一些预设选项，这里表示将js用于浏览器，只确保占比大于1%的浏览器的特性，主流浏览器的最新两个主版本。
更多与配置有关的信息，可以参考：
babel env preset设置,
browserlist预设置.

在命令行中运行相应webpack命令即可。

由于babel-preset配置选项较多，我们一般可以在根目录下建立.babelrc文件，专门用来放置babel preset配置，这是一个json文件。可以将上述配置修改如下：

//.bablerc文件
{
    "presets": [
        ["env",{
            "targets": {
                "browsers": ["> 1%", "last 2 versions"]
            }
        }]
    ]
}

//原webpack.config.js文件
module: {
    rules: [
        {
            test: /.js$/,
            use: {
                loader: "babel-loader"
            },
            exclude: "/node_modules/"
        }
    ]
}

babel-polifill插件

在上面的babel配置中，babel只是将一些es6，es7-8的语法转换成符合目标的js代码，但是如果我们使用一些特性或方法，比如Generator, Set, 或者一些方法。babel并不能转换为低版本浏览器识别的代码。这时就需要babel-polifill。

简单的说，polifill就是一个垫片，提供了一些低版本es标准对高级特性的实现。使用polifill的方法如下：

npm install --save babel-polifill

然后在应用入口引入polifill，要确保它在任何其他代码/依赖声明前被调用。

//CommonJS module
require("babel-polyfill");

//es module
import "babel-polifill";

在webpack.config.js中，将babel-polifill加入entry数组中：

entry: ["babel-polifill", "./app.js"]

相比于runtime-transform，polifill用于应用开发中。会添加相应变量到全局，所以会污染全局变量。

更多细节参考babel-polifill。

runtime-transform插件

runtime transform也是一个插件，它与polifill有些类似，但它不污染全局变量，所以经常用于框架开发。

安装：
npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

用法：
将下面内容添加到.bablerc文件中

{
    "plugins": ["transform-runtime"]
}

更多细节参考bable-runtime-transform插件。

GPU云服务器云服务器 webpack cdn配置 webpack配置cdn webpack常用配置项 Babel

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93954.html

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material D

摘要：建立项目首先，创建工程目录现在我们已经创建了我们要开发应用程序的文件夹，接着需要添加一个文件。这里为了版本的一致性，我把里的版本号前面删除了。为此，需要创建一个名为的文件，用来配置。 showImg(https://segmentfault.com/img/bVboiHi?w=1000&h=625); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！在过去的一年和...

asoren 2019-08-23 15:17 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
webpack配置 babel

摘要：三集成所需要的依赖和在或加载模块时，对代码进行预处理，语法转化为语法。到目前位置，用于开发应用的环境已经配置好了。本系列主要学习webpack的配置。webpack自己间接的用过不少次，但是自己配置却没多少次，所以特地写写文章，学习webpack的配置，有不恰当的地方，欢迎指正。这次配置 babel 。若你对webpack的概念还不了解，先查看相应文档webpack中文文档一、初...

Songlcy 2019-08-22 16:12 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换文件优化代码分割模块合并自...

wangbinke 2019-08-26 13:52 评论0 收藏0