HarmonyOS 鸿蒙Next 前端基础工程化知识

前言

目前，绝大部分前端项目都是一个标准的工程化项目，在使用我们提供的mxdraw和mxcad库中，我们默认也是采用模块化的引入方式。

如果你对前端不是很了解，那么就可以使用我们提供的前端库的js脚本直接加载到html页面使用，或者学习一下前端工程化知识，采用模块化的方式引入我们提供的前端库来构建一个符合前端工程化的项目。

在线CAD测试：https://demo.mxdraw3d.com:3000/mxcad/

Node环境安装

如果你在我们文档中看见 类似:

npm i mxdraw

npm是Node自带的包管理工具。

首先安装Node：https://nodejs.org/zh-cn/download请根据电脑操作系统安装对应的安装包

步骤 1 : 双击下载后的安装包

步骤 2 : 点击上图的Run(运行)，将出现如下界面

步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮

步骤 4 : Node.js默认安装目录为 C:\Program Files\nodejs\, 你可以修改目录，并点击 next（下一步）

步骤 5 : 点击树形图标来选择需要的安装模式 , 然后点击下一步 next（下一步）

步骤 6 :点击 Install（安装） 开始安装Node.js。也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）

安装过程：

点击 Finish（完成）按钮退出安装向导。

2.Node安装完成后需要配置环境变量

检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path"， 输出如下结果：

我们可以看到环境变量中已经包含了 C:\Program Files\nodejs\

如果没有，我们就需要把我们前面安装Node 步骤四中安装目录设置为环境变量：

找到我的电脑 =》鼠标右键选择=》 选择属性=》 找到高级系统设置=》 环境变量=》 变量path=》 点击编辑=》将node安装目录填上并确定

最后检查一下Node.js版本看是否安装成功

webpack

webpack是打包工具，用于打包前端项目。 以下只是简单说明下如何安装和使用，建议直接去webpack官网阅读。

1.初始化目录

我们先创建一个目录: webpack

然后进入到这个目录 输入以下命令：

npm init -y

2.安装依赖

npm install webpack webpack-cli html-webpack-plugin -D

3.安装mxdraw库

npm install mxdraw

4.创建src目录，并创建一个index.js文件

import { loadCoreCode, MxFun } from "mxdraw"

const createCanvas = (id) => {

    const div = document.createElement("div")
    const canvas = document.createElement("canvas")

    // 父级必须是固定高度（不能用百分比单位），宽度可以用100% 但是一定要设置
    div.style.height = "90vh"
    div.style.width = "100%"
    canvas.id = id
    div.appendChild(canvas)
    document.body.appendChild(div)
}

loadCoreCode().then(() => {
    const canvasId = "mxcad"
    createCanvas(canvasId)
    MxFun.createMxObject({
        canvasId,
        cadFile: "./demo/buf/hhhh.dwg"
    })
})

5.配置webpack

创建一个webpack.config.js文件:

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: process.env.development === "development" ? "development" : "production",
    plugins: [
        new HtmlWebpackPlugin({
            title: "use mxdraw webpack v5"
        })
    ],
    performance: {
        hints: false,
    },
}

6.运行

在命令行输入:

npx webpack serve

这时就可能会提示你

[webpack-cli] For using 'serve' command you need to install: 'webpack-dev-server' package.
[webpack-cli] Would you like to install 'webpack-dev-server' package? (That will run 'npm install -D webpack-dev-server') (Y/n)

这时直接输入: Y 然后按下回车键，就会自动下载对应版本的webpack-dev-server 依赖， 然后自动运行项目

7.打包

输入命令:

npx webpack

打包后可以在dist目录看见打包后的结果。

完整示例代码: https://github.com/mxcad/mxdraw-sample/tree/main/webpack