记一次矩阵列单元格合并和拆分组件的开发

1、思路来源

最近公司做商城的项目，商城首页有楼层设计，楼层需要自定义布局，于是在运营端配置的时候就需要预定一个矩阵列，通过鼠标滑动，确定最终的楼层布局。

拿到需求，第一个想到的是以前学过的一个开发数独游戏的课程，虽然需求不太一样，但都是基于宫格这样的结构开发的。

这个数独游戏是基于原生DOM，使用ES6的class和less动态样式表开发，最后使用gulp+webpack打包生成。借此基础，为了让我的组件能够兼容原生和框架，我选择了基于原生DOM，使用ES6的class和less动态样式表开发，最后使用webpack打包生成，发布至GitHub开源，发布到npm仓库。在使用的的时候只需要new一个实例对象，就生成了所需要的可以合并、拆分的矩阵列，如下：

项目地址：https://github.com/cumtchj/merge-split-box 欢迎star

2、项目搭建

项目使用webpack打包，涉及到ES6语法，就需要使用babel，样式使用scss（最终打包出了点小问题，把scss全部转为了使用js直接操作dom样式），开发过程中为了可以实时查看结果，使用了webpack-dev-server热启动。

项目结构如下：

打包配置如下：

module.exports = function () {
  let config = {
    optimization: {
      minimizer: []
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
      }),
      new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ["dist"]}),
    ],
  }
  if (ENV === "development") {
    config.devServer = {
      contentBase: "./dist",
      open: true,
      port: 8080,
      hot: true,
      hotOnly: true
    };
    config.plugins.push(new webpack.HotModuleReplacementPlugin())
  }

  // 打包以后使用压缩，出现不知名报错，故弃用
  // if(ENV==="production"){
  //   config.optimization.minimizer.push( new UglifyjsWebpackPlugin(
  //   {
  //   uglifyOptions: {
  //     mangle: true,
  //     output: {
  //       comments: false,
  //       beautify: false,
  //     },
  //   }
  // }
  // ))
  // }

  return {
    mode: ENV,
    devtool: ENV === "production" ?
      false :
      "clean-module-eval-source-map",
    entry: {
      index: PACK_TYPE === 'example' ? './src/example' : './src/index'
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].js",
      library: "MergeSplitBox",
      libraryTarget: "umd",
      libraryExport: "default"
    },
    resolve: {
      extensions: [".js", '.scss']
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: "babel-loader",
          exclude: "/node_modules/",
        }, {