webpack Babel

Babel

Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：

使用下一代的JavaScript代码（ES6，ES7...），即使这些标准目前并未被当前的浏览器完全的支持；
使用基于JavaScript进行了拓展的语言，比如React的JSX；
Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

我们先来一次性安装这些依赖包
```
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
```
在webpack中配置Babel的方法如下:
```
module.exports = {entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "bundle.js"//打包后输出文件的文件名
    },devtool: 'eval-source-map',devServer: {contentBase: "./public",//本地服务器所加载的页面所在的目录historyApiFallback: true,//不跳转inline: true//实时刷新
    },module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader",options: {presets: ["es2015", "react"]}},exclude: /node_modules/}]}
};
```
Babel的配置

Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：

module.exports = {entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "bundle.js"//打包后输出文件的文件名
    },devtool: 'eval-source-map',devServer: {contentBase: "./public",//本地服务器所加载的页面所在的目录historyApiFallback: true,//不跳转inline: true//实时刷新
    },module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},exclude: /node_modules/}]}
};

//.babelrc
{"presets": ["react", "es2015"]
}

转载于:https://www.cnblogs.com/xiaofenguo/p/7573931.html

webpack Babel相关推荐

es5直接引入html文件,ES6+转ES5（webpack+babel、指定多个js文件、自动注入）
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 一.新建项目,目录如下二.执 ...
初入react-redux （基于webpack babel的react应用框架）
react这么热门的框架也不介绍了,redux是一个单项数据流的小框架,当然不只配合react,它起初是为react而配的,现在面向所有了,比如ng-redux的项目.redux做为react的标准搭 ...
babel编译html文件,使用webpack+babel来_编译_JS代码
常规的引用外部JS文件是在es2015中,并不需要这样.我们使用import-from语法示例:一如分算需上来处一定迹面数一跳这件我子作我们在ui.js里新直能分支调二浏页器朋代说,事刚需求定义2 ...
Node.js webpack babel
问题: 高级语法,webpack不支持,需要babel来转换 class Person {static info = 'aaa' } 1.安装转换器 npm i -d babel-loader @ba ...
那些激动人心的React,Webpack,Babel的新特性对于我们开发体验带来哪些提升
(Webpack 4.0+, React 16.0.0+, Babel 7+) 作者: 赵玮龙写在开头: 在怀着激动和忐忑的心情写出团队第一篇文章时,这个兴奋感一方面来自团队组建以来这是我们首次对外 ...
webpack Babel 浏览器兼容性
还是先看版本对应号版本不对应否则会报错* 为了解决浏览器兼容性的问题使用webpack的babel插件进行低版本的浏览器识别到时髦的js语法 1.安装命令 (注意对应的版本号) npm insta ...
前端工资涨不上去？可能是你没掌握构建工具：关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC......的那些事
每个前端都应该掌握构建工具大概从 2019 年到现在的这三年多的时间里,构建工具几乎已经成为前端发展最快的一个部分. 构建工具,属于前端工程化领域.而前端工程化,是每一个高级前端开发人员都必须要去深 ...
如何征服Webpack 4并构建一个出色的React应用
This article has been outdated with the new release for babel, kindly check the updated article &quo ...
小程序工程化实践（上篇）-- 手把手教你撸一个小程序 webpack 插件，一个例子带你熟悉 webpack 工作流程...
本文基于 webpack 4 和 babel 7,Mac OS,VS Code 小程序开发现状: 小程序开发者工具不好用,官方对 npm 的支持有限,缺少对 webpack, babel 等前端常用工 ...

webpack Babel

Babel

Babel的安装与配置

Babel的配置

webpack Babel相关推荐

最新文章

热门文章