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

4次阅读

共计 1474 个字符，预计需要花费 4 分钟才能阅读完成。

最近做的一个项目，因涉及到 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 文件中。

将 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}]
  ]
}

最后在终端运行