## 命令说明：

```
//安装库
npm install 

//编译第三方库
npm run dll 

//测试页面
npm run dev

//发布项目
npm run dist

//测试图表
npm run chart-dev

//发布图表
npm run chart-dist


//运行本地服务 用来访问本地已发布的页面
npm run server

```


## 目录说明：

+ dll 预编译目录、将第三方库，编译后，开发测试过程会更快。
+ src 源文件目录
+ dist 项目发布目录
+ dev 项目开发目录,如需要测试demo1时，可运行 npm run dev，然后访问127.0.0.1:3000/demo1.html
+ dev/static 静态资源目录，即该目录下的资源不会走webapck。
+ 本环境使用webpack-dev-server，开发时，会将目录指向dev目录。而发布时会将static目录复制到dist目录下，因此将static放在dev下刚好可以保证在开发目录下与发布目录下可以同样的方式访问static目录。
+ src/pages/demo1、src/pages/demo2分别对应可视化页面，建议按页面整理html、css、图片等源文件
src/pages/common/为公共目录，可存放跨页面共享的相关资源

+ charts 为图表目录
+ charts/chart1、charts/chart2 分别对应一个图表，该图表的所有资源均在对应的目录下。

+ charts_tests 为图表测试目录，其下的子目录与charts下的子目录对应。
如需要测试chart1时，可运行 npm run chart-dev，然后访问127.0.0.1:3000/chart1.html
注意：不需要在charts_tests下的每个图表目录下创建index.html页，只需创建index.js，如果没有index.html页，会自动调用模版页 template.html

+ chartsDist 为图表发布目录

## 新增功能
+ 简单的html拼接（非模版引擎方式）
用于站网类项目开发，可以将共公的html块提取的共公的文件中 tpl文件（用其他的扩展名也行，但不要使用html，会与HtmlWebpackPlugin中用到的html冲突）。然后在需要的页面中  <%= require('../common/tpl/header.tpl') %> 引入。
 >> 注：为什么可以在hhtml中用<%= %>引入，见官方说明：https://github.com/jantimon/html-webpack-plugin/blob/main/docs/template-option.md
 ···
  {
    test: /\.tpl$/i,
    use: [{
        loader: 'raw-loader',
        options: {
            esModule: false,
        },
    }]
}
 ···

## 注意事项：
+ 需要修改resolve.alias，请到config/common.js中修改
+ 该环境目前使用的库基本上都是最新版本，详见package.json，后续升级需要注意各种版本兼容问题  2022-3-8
+ 安装第三方库使用 npm install xx --save  安装环境依赖库时使用 npm install xx --save-dev。切记不要乱用。
+ 环境及目录搭建好后，建议将示例删掉。