资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/webpack配置 babel

webpack配置 babel

Songlcy / 2543人阅读

摘要：三集成所需要的依赖和在或加载模块时，对代码进行预处理，语法转化为语法。到目前位置，用于开发应用的环境已经配置好了。

</>复制代码 
  1. 本系列主要学习webpack的配置。webpack自己间接的用过不少次，但是自己配置却没多少次，所以特地写写文章，学习webpack的配置，有不恰当的地方，欢迎指正。这次配置 babel 。

若你对webpack的概念还不了解，先查看相应文档webpack中文文档

一、初始化一个webpack项目 
</>复制代码 
  1. npm init -y                     // 初始化项目，会添加一个package.json
  2. npm install --save-dev webpack  // 下载webpack，并记录到package.json的devDependencies中
二、新建webpack.config.js文件

指定入口和出口。

</>复制代码 
  1. // webpack.config.js
  2. const path = require("path");
  3. module.exports = {
  4.   entry: "./src/index.js",
  5.   output: {
  6.     filename: "bundle.js",
  7.     path: path.resolve(__dirname, "dist")
  8.   },
  9.   mode:"development"
  10. };

当前项目目录为

</>复制代码 
  1. dist            // 手动新建，因出口指定为此文件夹。
  2.  |---index.html
  3. src
  4.  |---index.js
  5. package-lock.json
  6. package.json
  7. webpack.config.json
三、集成babel

所需要的依赖：babel-loader、babel-core、babel-preset-env、babel-polyfill、babel-runtime和babel-plugin-transform-runtime

babel-loader：在import或加载模块时，对es6代码进行预处理，es6语法转化为es5语法。
babel-core：允许我们去调用babel的api，可以将js代码分析成ast（抽象语法树），方便各个插件分析语法进行相应的处理.
babel-preset-env：指定规范，比如es2015，es2016，es2017，latest，env（包含前面全部）
babel-polyfill：它效仿一个完整的ES2015+环境，使得我们能够使用新的内置对象比如 Promise，静态方法比如Array.from 或者 Object.assign, 实例方法比如 Array.prototype.includes 和生成器函数（提供给你使用 regenerator 插件）。为了达到这一点， polyfill 添加到了全局范围，就像原生类型比如 String 一样。
babel-runtime babel-plugin-transform-runtime：与babel-polyfill作用一样，使用场景不一样。

为了更简单明了，把依赖的安装分开，不一次性安装所有依赖。

1、安装babel-loader和babel-core 
</>复制代码 
  1. npm install --save-dev babel-loader babel-core

在webpack.config.js中添加

</>复制代码 
  1. module: {
  2.     rules: [
  3.       {
  4.         test: /.js$/, exclude: /node_modules/, loader: "babel-loader"
  5.         // test 符合此正则规则的文件，运用 loader 去进行处理，除了exclude 中指定的内容
  6.       }
  7.     ]
  8.   }
2、安装babel-preset-env 
</>复制代码 
  1. npm install babel-preset-env --save-dev

新建 .babelrc 文件

</>复制代码 
  1. //babelrc
  2. {
  3.   "presets": ["env"]
  4. }
3、安装babel-polyfill

此依赖用于开发应用，会在全局添加新的方法，会污染全变量。

</>复制代码 
  1. npm install --save babel-polyfill

在入口文件本文为index.js的顶部添加

</>复制代码 
  1. import "babel-polyfill"

在webpcak.config.js中将babel-polyfill添加到entry数组中

</>复制代码 
  1. module.exports = {
  2.   entry: ["babel-polyfill", "./src/index.js"],
  3.   ...

最终webpack.config.js为

</>复制代码 
  1. const path = require("path");
  2. module.exports = {
  3.   entry: ["babel-polyfill", "./src/index.js"],
  4.   output: {
  5.     filename: "bundle.js",
  6.     path: path.resolve(__dirname, "dist")
  7.   },
  8.   mode:"development",
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /.js$/, exclude: /node_modules/, loader: "babel-loader"
  13.         // test 符合此正则规则的文件，运用 loader 去进行处理，除了exclude 中指定的内容
  14.       }
  15.     ]
  16.   }
  17. };

项目目录为

</>复制代码 
  1. dist            // 手动新建，因出口指定为此文件夹。
  2.  |---index.html
  3. src
  4.  |---index.js
  5. .babelrc
  6. package-lock.json
  7. package.json
  8. webpack.config.json

到目前位置，用于开发应用的babel环境已经配置好了。
执行

</>复制代码 
  1. npx webpack --config webpack.config.js

便可在dist中看到打包出来的bundle.js文件

4.babel-runtime 和 babel-plugin-transform-runtime

如果你不是开发应用，而是开发提供给第三方利用的框架的话，将第3步的polyfill改为这两个依赖。它们在局部添加新方法，不污染全局变量

</>复制代码 
  1. npm install --save-dev babel-runtime babel-plugin-transform-runtime

.babelrc文件

</>复制代码 
  1. {
  2.   "presets": ["env"],
  3.   "plugins": ["transform-runtime"]
  4. }

用于开发框架的babel环境已经配置好，
同样执行

</>复制代码 
  1. npx webpack --config webpack.config.js

便可在dist中看到打包出来的bundle.js文件

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

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

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

相关文章

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

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

    asoren 评论0 收藏0

  • webpack 项目构建：（二）ES6 编译环境搭建

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

    marser 评论0 收藏0

  • webpack - babel配置

    摘要：配置是一个编译器，是前端开发中的一个利器。其中，插件是为了告诉只编译批准的内容，相当于及最新版本。安装用法将下面内容添加到文件中更多细节参考插件。 webpack - babel配置 babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使我们在开发中可以使用最新的javascript语法。 通过构建和babel，可以使用最新js语法进行...

    yunhao 评论0 收藏0

  • Webpack入门到精通（1）

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

    SunZhaopeng 评论0 收藏0

  • Webpack入门到精通（1）

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

    wangbinke 评论0 收藏0

发表评论

登陆后可评论

0条评论

Songlcy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<