ES6及以上版本的 js 文件在一些低版本浏览器上不能执行，所以当项目开发完成后，我们需要对 js 文件进行编译，将ES6+的语法转译为 ES5。这里我们使用gulp的webpack-stream插件来对js文件进行打包。解决js转译的问题需要用到babel，我们在这里使用webpack 的 babel-loader。具体操作往下看。
先来认识一下webpack-stream，我们都知道webpack的功能非常强大，但是在，批量式处理方面，依然是gulp更胜一筹，通过使用webpack-stream，可以将webpack作为‘流’运行，集成到gulp中。
npm install --save-dev webpack-stream
#或者使用yarn安装
yarn add webpack-stream -D
一个简单的 webpack.config.js文件内容如下：
module.exports = {
mode: "development",
devtool:"inline-source-map",//调试工具显示
entry: "./src/js/app.js",
output: {
path: "/home/dev/",
filename: "app.js"
},
module:{
} //下面有该内容的详细介绍
}
webpack的配置项：
entry: './path/to/my/entry/file.js'，表示只有一个入口文件；entry：{pageOne:'./src/pageOne/index.js',pageTwo:'./src/pageTwo/index.js'}，设置多页面应用程序；将webpack.config.js文件导入gulpfile.js中：
const {
src,series,dest} = require("gulp");
const webpack = require("webpack-stream");
const webpackConfig = require ("./webpack.config.js");
const path = require("path");
function compileJs() {
return src("./src/js/**/*.js")
.pipe(webpackStream(webpackConfig))
.pipe(dest("./dev/"))
}
exports.default = series(compileJs)
在终端中直接输入gulp启动服务，就可以看到打包好的文件了。
现在我们可以实现使用webpack-stream对js文件进行打包输出，但是如果在 js 中，我们使用的是 ES2015+ 的语法，会出现低版本浏览器不兼容的问题，所以我们需要对打包的文件进行编译，这里用到下面两个插件。
它的作用是加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。
npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime --save-dev
//或者使用yarn安装
yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime -D
在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，可以使用 options 属性来给 loader 传递选项，像下面这样：
module: {
rules: [
{
test: /\.js$/, //需要编译的文件
exclude: /node_modules/, //排除 node_modules目录
use: {
loader: "babel-loader", //loader名称
options: {
//配置
presets: ['@babel/preset-env'], //预设
plugins: ['@babel/plugin-transform-runtime']//插件
}
}
}
]
}
点击查看关于babel的详细介绍。
它的作用是将资源文件转换为字符串。可以搭配 art-template 模板引擎一起使用，提高开发效率。
例如当我们在js文件中引入下面这个html文件时，会自动将这个html文件换成字符串。
import ItemTpl from "../../views/position/position-item.html";
console.log(ItemTpl); //“<html>......</html>”
npm install string-loader --save-dev
//或者使用yarn来安装
yarn add string-loader -D
将html转换为字符串模板：
module: {
rules: [
{
test:/\.html$/,
loader:"string-loader"
}
]
}
将json转换为字符串模板：
module: {
rules: [
{
test:/\.json$/,
loader:"string-loader"
}
]
}
到此为止，通过使用 babel-loader 、string-loader 这两个插件，我们可以将js文件转译为兼容任何浏览器的ES5语法。
gulpfile.js文件如下：
const {
src,series,dest} = require("gulp");
const concat = require("gulp-concat");
const webpackStream = require("webpack-stream");
const path = require("path");
function compileJs() {
return src("./src/js/**/*.js")
.pipe(webpackStream({
mode: "development",
devtool:"inline-source-map",
entry: {
main:"./src/js/app.js",
detail:"./src/js/detail.js"
},
output: {
path: path.resolve(__dirname, "./dev/"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'], //预设
plugins: ['@babel/plugin-transform-runtime']
}
}
},
{
test:/\.html$/,
loader:"string-loader"
}
]
}
}))
.pipe(dest("./dev/"))
}
exports.default = series(compileJs);
文章浏览阅读98次。在质量管理的道路上，没有捷径可循。质量管理是一项需要不断积累经验和智慧的长期过程，其中涵盖了七大关键原则，这些原则是组织在质量管理方面取得持续成功的基石。_组织需要管理其与有关的 的关系
文章浏览阅读538次。以前对访问修饰符总是模棱两可,让自己仔细解释也是经常说不很清楚.这次要彻底的搞清楚.现在总结如下:一.概括总结 各个访问修饰符对不同包及其子类，非子类的访问权限Java访问权限修饰符包含四个：public，protected，friendly，private；但是，friendly在java中并没有显示的声明，成员变量和方法默认情况下就是friendly权限。现在把它们的访问权限表示出来:(目前展..._访问修饰符friendly
文章浏览阅读442次。https://www.cnblogs.com/yunlambert/p/10226468.html#include <iostream>#include <thread>#include <chrono>#include<functional>using namespace std;class Timer { bool clear = false;public: template<typename T> void set_c++ timer
文章浏览阅读1.4w次，点赞29次，收藏172次。从表的一端开始，依次将表中的关键字和给定的值进行比较，若表中的关键字和给定的值相等，则查找成功，反之查找失败。_数据结构顺序查找c语言代码
文章浏览阅读1.1k次。虚拟机怎么打开ssh服务器 内容精选换一换本手册介绍如何安装Mind Studio以及安装过程中的故障处理方法。Mind Studio只能安装在Ubuntu服务器上，可以在Ubuntu服务器上使用原生桌面自带的终端gnome-terminal进行安装，也可以在Windows服务器上通过SSH登录到Ubuntu服务器进行安装，因为Mind Studio是一款GUI程序，所以在Win本节操作介绍在Wi..._虚拟机如何进入ssh
文章浏览阅读928次，点赞3次，收藏11次。sin() 是 Arduino 数学库中的一个函数，它的作用是计算一个角度的正弦值。Arduino 2005 年时面世，作为意大利伊夫雷亚地区伊夫雷亚互动设计研究所的学生设计，目的是为新手和专业人员提供一种低成本且简单的方法，以建立使用传感器与环境相互作用的装置。可以使用 sin() 函数和反正弦函数 asin() 来计算每秒钟物体沿着圆周移动的弧长对应的弧度值，然后除以 PI 得到相对于圆心的角度变化。在使用sin()函数计算角度的正弦值时，确保输入的角度值在正确的范围内。_arduino sin
文章浏览阅读1.2k次。整理自用，有误烦请指正_操作系统实验三
文章浏览阅读1.9k次，点赞22次，收藏29次。首先在了解Virtual Audio Cable音频回环技术之前，我们先介绍几个基础的概念：虚拟声卡：是一种硬件虚拟化技术；基于软件技术虚拟出麦克风或者虚拟扬声器硬件，提供给上层用户程序使用虚拟麦克风和扬声器，例如通过给虚拟扬声器喂送音频数据实现麦克风录音效果。音频回环：跟我们网络通信的回环地址（127.0.0.1）通信一样；所谓的音频回环是内核驱动层直接将麦克风/扬声器的声音直接提交给扬声器/麦克风，可以达到数据硬件层的直接转发的功能。_virtual audio cable
文章浏览阅读965次。1 importpygame2 from plane_sprites import *345 classPlaneGame(object):6 """飞机大战主游戏"""78 def __init__(self):9 print("游戏初始化")1011 #1.创建游戏的..._python飞机大战源代码
文章浏览阅读1.4k次，点赞2次，收藏22次。实验工具eNSP （AR1220）实验拓扑配置PC110.1.1.2255.255.255.010.1.1.1PC210.1.4.2255.255.255.010.1.4.1R4undo terminal monitor #配置前最好关掉这个终端监控，否则一直弹信息影响操作syssysname R4interface LoopBack0 ip address 10.1.127.1 255.255.255.255 router id _ospf enable 1 area 0.0.0.0
文章浏览阅读125次。原标题：完全体 Android Wear 2.0发布 在北京时间今天凌晨的谷歌I/O大会上，谷歌推出了其可穿戴设备操作系统Android Wear的2.0版本，该版本之中最大的特色为允许智能手表脱离智能手机独立运行。在本次Android Wear 2.0更新之中，智能手表将可以通过蓝牙、Wi-Fi甚至移动网络(只要硬件上支持)直接和互联网传输信息，同时此特性也将允许使用Android Wear智能..._android headlines, report: android wear 2.0 will bring android pay to ios.
文章浏览阅读435次。首先需要命令行输入pip uninstall xlrd 卸载新版本的xlrd，然后输入pip uninstall xlrd==1.2.0，指定安装1.2.0版本的xlrd。pyChram导入xlrd库操作xlsx文件报错：xlrd.biffh.XLRDError: Excel xlsx file;原因是：新版本（2.0.1）的xlrd因安全问题不支持xlsx格式，可以降低xlrd的版本。_pycham不支持xlsx