webpack4 使用babel处理ES6语法的一些简单配置

一,安装包

npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-devnpm install --save @babel/polyfillnpm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtime npm install @babel/runtime-corejs2 -D

二 然后配置webpack.config.js中的module

module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }

三 然后在根目录的 .babelrc文件中配置

{ "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false } ] ] }

不在 .babelrc文件中配置也可以:

https://babeljs.io/setup#installation 有关于webpack的一些安装配置

{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { // "presets": [["@babel/preset-env",{ // "targets": { // "chrome": "67" // }, // useBuiltIns: "usage", // }]] "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false } ] ] } }

可以使的ES6语法变为ES5,向下兼容,还可以根据引用使用的不存在函数自动引入

 四.loadsh  字符串连接函数 先安装 npm i loadsh -D

import _ from "loadsh"; console.log(_.join(['a', 'b', 'c'], '***'));

结果为:  a***b***c

转载于:https://www.cnblogs.com/init-007/p/11355319.html