记一次新建webpack环境将ES6语法转换为ES5语法的过程

微信扫一扫,分享到朋友圈

记一次新建webpack环境将ES6语法转换为ES5语法的过程

最近做的一个项目,因涉及到3D的部分功能,由于公司没有这方面经验的人,同是项目比较赶。领导将这部分业务外包给了一个公司做。

这块功能用的是 three.js
做的,在本公司的的项目里用了 iframe
引入。所以自己项目的webpack也没有对这部分压缩和转码。

要上线的时候突然发现甲方公司那里的流览器打不开3D这一块。跟根错误发现是3D的业务代码没有进行babel转换。

涉及到很多类的属写法不被旧版chrome支持

class Example {
aProp = { x: 100 }
constructor(){ ... }
}

由于这部分业务已经签收了,考虑到利益问题,只能本BUG制作者接下这个锅。

开始

原理

3D部分代码里面是一个个的html文件,html文件中引用了其他的js文件。简单的做法就是用webpack从入口的js文件开始打包和转换,最后只生成一个js,将这个js引用到相应的html文件中。

webpack环境搭建

将3D相关代码复制出来,存放在一个文件夹

// 初始化
npm init -y
// 安装依赖
yarn add webpack webpack-cli --save-dev

目录结构如下:

webpack-3d
|- package.json
+ |- /src
+   |- index.js
+   |- index.html
+   |- xxx.js
+   |- xxx.js
+ |- webpack.config.js

其中, index.js
index.html
的入口文件,各个 xxx.js
是相应的导入依赖。

webpack.config.js
是webpack的配置文件,在这量设定入口和输出文件及相应的loader

const path = require('path')
module.exports = {
// 设写环境为none,不然打包时会发警告
mode: 'none',
entry: {
index: './src/index.js', // 第一个html的入口文件
customs: './src/customs.js'    // 第二个html的入口文件
},
output: {
filename: '[name].[chunkhash].js', // 输出文件名,后面接上16位hash
path: path.resolve(__dirname, 'dist') // 输出的文件夹
},
module: {
// 本次的目的,进行babel的转换
rules: [
{
test: /.js$/,
loader: 'babel-loader',
},
]
}
}

按装一下需要的loader

// babel的转换一般需要三个转换器
yarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 babel-loader -D

同时需要特别注意,因为项目中用了ES6的class相关方法,还要按装一下 @babel/plugin-proposal-class-properties

yarn add @babel/plugin-proposal-class-properties -D

在项目跟目录下新建 .babelrc
文件

写入以下内容

{
"presets": [
[
"@babel/preset-env", {
"targets": {
"browsers": [
"last 2 versions",
"not ie <= 9"
]
}
}
]
],
"plugins": [
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}

最后在终端运行

npx webpack

即可将entry里面的各个入口文件相应地转码并打包成一个js文件,在相应的html文件引入即可

CakePHP View Cache的一个问题

上一篇

Android中的View(控件)树结构

下一篇

你也可能喜欢

记一次新建webpack环境将ES6语法转换为ES5语法的过程

长按储存图像,分享给朋友