webpack4 es6转换

在webpack里用es6语法, ie浏览器不识别,为了让浏览器识别,需要用到bebal转换;

bebal,英文是通天塔的意思, 我们常说的巴比伦也是这个词;我估计是当初设计者是想用它作为一个沟通es6新语法和以前的就的js语法的一个工具,所以用了bebal.

步骤: 1在bebal官网的设置里,点击webpack,就会出现相应的教程:

第一步2install让下载babel-loader @babel/core;第二步3usage让在你的webpack.config.js配置module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }第三步:4生成一个配置文件.babelrc 注意是在根路径,也就是和你要打包的js文件同一级别.并且在里面写上{ "presets": ["@babel/preset-env"] }, 按照它的要求安装@babel/preset-env,并进行设置

2 设置preset-env,按照上面的例子

3按照polyfill,这个转换promise这种关键字的工具. 并将useBuildin属性设为useage;

并在打包的文件开头require("@babel/polyfill"); 或者用module.exports = { entry: ["@babel/polyfill", "./app/js"], };

生产环境下的打包

在docs选项里 transform-runtime插件按照要求一步一步做,最后把corejs的属性改成2,然后下载个corejs就可以了. 下图是把配置放到了配置项里,当然放到.bebalrc文件也可以

 1 {
 2             test: /\.js$/,
 3             exclude: /node_modules/,
 4             loader: "babel-loader"
 5             // options:{ 6             //     // "presets": [
 7             //     //     [
 8             //     //         "@babel/preset-env",{ 9             //     //             "useBuiltIns": "usage",
10
11             //     //             "targets": {12             //     //                 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
13             //     //               },
14             //     //         }
15             //     //     ]
16             //     //   ]
17
18
19             //         "plugins": [["@babel/plugin-transform-runtime", {20             //             "corejs": 2,
21             //             "helpers": true,
22             //             "regenerator": true,
23             //             "useESModules": false
24             //           }]]
25
26
27             // }
28
29         },

转载于:https://www.cnblogs.com/dangdanghepingping/p/11022671.html

webpack4 es6转换相关推荐

学习webpack4 - ES6语法转化
学习webpack4 - 基础配置学习webpack4 - HTML处理学习webpack4 - 样式处理学习webpack4 - ES6语法转化学习webpack4 - 第三方库的使用学习 ...
webpack之配置es6转换成es5
webpack之配置es6转换成es5 为什么要将代码中的es6语法转换成es5语法呢?这是因为有些浏览器无法识别es6语法.而webpack在不借助babel的情况下,只能对js进行打包处理,无法将 ...
babel ES6 转换 ES5 实现原理
babel ES6 转换 ES5 实现原理前言 babel 各种包介绍转换过程案例前言前面写过一篇简单的 AST 抽象语法树的文章简述 AST 抽象语法树.今天来看一下在 babel 中是 ...
如何用babel将ES6转换
Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本. 这一过程叫做"源码到源码"编译, 也被称为转换编译. 通俗的说,就是我们可以用ES6 ...
如何将ES6转换成ES5？
一. 介绍 ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现. Babel是一个广泛使用的转码 ...
用 Webpack 和 ES6 转换快速开发 Rails 的富客户端
2019独角兽企业重金招聘Python工程师标准>>> Fast Rich Client Rails Development With Webpack and the ES6 Tra ...
es6转换es5 babel配置
npm install --save-dev babel-preset-es2015 babel-cli .babelrc文件 "presets":[ " ...
webpack4配置详解
//方式一:单文件写法 entry: {index: './src/pages/route.js',//about: './src/pages/about.js',//other:()=>{.. ...
ES6转ES5：Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩以上步骤自动监控执行步骤: 1.安装插件在命令行中定位到项目根目录安装全局 Gulp npm install -g gulp 安装项目中使 ...

webpack4 es6转换

webpack4 es6转换相关推荐

最新文章

热门文章