Webpack babel ES6 转ES5
npm install -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/polyfill babel-loader创建.babelrc文件
命令行方式创建输入：type nul>.babelrc
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"modules": false
}]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": false,
"helpers": false,
"regenerator": false,
"useESModules": false
}
]
],
"comments": false
}添加module
yarn add clone -Dwebpack.config.js配置 babel-loader
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports= {
mode:'development',//production development
entry:'./src/index.js',//入口
output:{
filename:'bundle.[hash:8].js',//打包后的文件名
path:path.resolve(__dirname,'dist')
},
devServer:{
port:8090,
progress:true,
contentBase:'./dist'
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
minify:{removeAttributeQuotes:true,//删除属性双引号
collapseWhitespace:true,//html折叠一行
minifyJS: true,//压缩HTML中JS
minifyCSS: true//压缩HTML中CSS
},
hash:true//生成hash戳
})
],
module: {
rules: [ // 定义css规则,use从下往上顺序执行
{
test: /\.css$/, // 正则匹配要识别的css
use: [
{
loader: 'style-loader' // 使用style-loader进行处理，位置必须在css-loader前面
},
{
loader: 'css-loader' // 使用css-loader进行处理
}
]
//use:['style-loader','css-loader'] // 此处也可以这样写
},
{
test:/\.less$/,
use: [
{
loader: 'style-loader' // 使用style-loader进行处理，位置必须在css-loader前面
},
{
loader: 'css-loader' // 使用css-loader进行处理
},
{
loader: 'less-loader' //less ——> css
}
]
},
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
}
]
}
}Superstr-1.0.js
function Superstr(){}
Superstr.prototype.version='1.0';
Superstr.prototype.jsonHttpRequest={
/**
*请求JSON格式数据
*@param:method 请求方式，标准的GET、POST（_method=PUT）
*@param:url 请求地址URL
*@param:asyn 是否异步请求
*@param:callback 请求成功执行的回调函数
*@data:请求参数
*/
request: function(method,url,asyn,callback,data) {
var param = null;
var temp = 'superstr_timestamp=' + new Date().getTime();
if(data) {
for(var key in data) {
temp = temp + '&' + key + '=' + data[key];
}
}
if(method.toLocaleUpperCase()=='POST') {
param = temp;
} else {
method = 'GET';
if(url.indexOf('?')>-1) {
url = url + '&' + temp;
} else {
url = url + '?' + temp;
}
}
var xhr = new XMLHttpRequest();//创建Http请求对象
xhr.onreadystatechange=function() {
if(xhr.readyState==4&&xhr.status==200) {
callback(JSON.parse(xhr.responseText));
} else if(xhr.readyState==4){
alert("———请求异常———"+"\n"+"请求地址(url)："+url+"\n"+"请求方式(method)："+method+"\n"+"状态码(status)："+xhr.status+"\n"+"异步(asyn)："+asyn);
}
}
xhr.open(method,url,asyn);//true：异步 false：同步
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);
}
}
Superstr.prototype.arrays={
/**
*移除数组中重复的对象
*@param:arr 数组
*@param:property 数组中对象的属性名称
*@return:array 处理后的数组
*/
only: function(arr, property) {
let hash = {}
var array = arr.reduce((item, next) => {
if (!hash[next[property]]) {
hash[next[property]] = true;
item.push(next);
}
return item;
}, [])
return array;
},
/**
*过滤数组中的对象
*@param:arr 数组
*@param:property 数组中对象的属性名称
*@param:value 数组中对象属性的值
*@return:array 处理后的数组
*/
remove: function(arr,property,value) {
var array = arr.filter(
(obj) => {return obj[property] != value}
)
return array;
},
/**
*数组冒泡排序
*@param:arr 数组
*@param:property 数组中对象的属性名称
*/
bubbleSort: function(arr, property) {
var array = arr,temp;
for(var i=0; iarr[j][property]) {
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
return array;
}
}
Superstr.prototype.classNames={
names: {
draggable:"draggable"
},
/**
*添加拖拽效果，对象互换
*@descriptions：在添加效果之前需要保证对象可拖动（draggable="true"）
*/
draggable: function() {
var className = this.names.draggable;
var obj = null;//拖动的对象
window.onload=function() {
var elements = document.getElementsByClassName(className);
for(var n=0;n index.js 导入 Superstr-1.0.js
import './Superstr-1.0.js';执行打包命令
npx webpack发现打包后的代码中已经没有 =>箭头函数了