www.6766.comwebpack4与babel配合使es6代码可运行于低版本浏览器的方法_javascript技巧_脚本之家

new promise(State of Qatar等那一个是新API。

使用

 webpack-babel-es6 webpack构建由babel转码的es6语法,支持es6语法和API
 请查看浏览器控制台 

退换包含两局地:语法和API

使用es6+新语法编写代码,可是不能够运作于低版本浏览器,要求将语法调换来es5的。那就借助babel转变,再增添webpack打包,实现代码的转移。

webpack4,能够零配置创设项目,那是因为它的成都百货上千配置值都暗许了。在此,大家需求自个儿安插。

运作该html,能够见见调控台有内容输出 weiqinl - 2018 - 3

const name = 'weiqinl'let year = new Dateexport { name, year }

import _ from 'lodash'import { name, year } from './utils'Promise.resolve.then(value => { console.log(`${name} - ${value} - ${_.add

let、const那几个是新语法。

创立三个 webpack.config.js 文件

并新建 .babelrc 文件,里面能够布署比比较多东西,内容为:

webpack构建

webpack创设打包好的js文件,大家将其引进到html文件。

类库 utils.js

能够git查看源码

babel转换

设置babel编译器和呼应的周转时遭受

复制代码 代码如下:npm install -D
@babel/core @babel/preset-env @babel/plugin-transform-runtime
@babel/polyfill

const path = require;module.exports = { mode: "production", entry: ['@babel/polyfill', './src/index.js'], output: { path: path.resolve, filename: '[name].bundle.js' }, module: { rules: [{ test: /.js$/, include: [ path.resolve ], exclude: /(node_modules|bower_components)/, loader: "babel-loader", }] }}

以上正是本文的全部内容,希望对大家的读书抱有助于,也意在大家不吝赐教脚本之家。

{ "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "modules": false }] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": false, "helpers": false, "regenerator": false, "useESModules": false } ] ], "comments": false}

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图