新增的kkt是什么

我又要来提pr了，然后pull以下启动不了，说kkt
Invalid .kktrc.js file.

我需要给map添加两个参数，一个是海外地图启动参数，一个是webgl转图片下载的参数，
这俩文档上没有，都是高德的销售暗中告诉我的- -

// 海外地图
new AMap.Map("container", {
        viewMode: "2D", 
        zoom: 11, 
        center: [116.397428, 39.90923], 
        overseaDataType: "mapbox", // 这个
        vectorMapForeign: "style_zh_cn", //还有这个
      });

// 可下载地图
new AMap.Map("root", {
  zoom: 13,
  center: [116.39, 39.9],
  WebGLParams: {
    preserveDrawingBuffer: true,
  },
});

@starInEcust

@starInEcust 我不确定是什么问题，因为最近没有更新 kkt 配置，kkt 是修改 webpack 的配置，基于 create-react-app 封装，暴露 webpack 配置提供修改

react-amap/website/.kktrc.ts

Lines 1 to 88 in af63d6d

    
           import webpack, { Configuration } from 'webpack'; 
        
           import { LoaderConfOptions } from 'kkt'; 
        
           import lessModules from '@kkt/less-modules'; 
        
           import { disableScopePlugin } from '@kkt/scope-plugin-options'; 
        
           import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader'; 
        
           import pkg from './package.json'; 
        
           export default (conf: Configuration, env: 'production' | 'development', options: LoaderConfOptions) => { 
        
             conf = lessModules(conf, env, options); 
        
             conf = mdCodeModulesLoader(conf); 
        
             conf = disableScopePlugin(conf); 
        
             // Get the project version. 
        
             conf.plugins!.push( 
        
               new webpack.DefinePlugin({ 
        
                 VERSION: JSON.stringify(pkg.version), 
        
               }), 
        
             ); 
        
             conf.module!.exprContextCritical = false; 
        
             conf.ignoreWarnings = [{ module: /node_modules[\\/]parse5[\\/]/ }]; 
        
             if (env === 'production') { 
        
               conf.output = { ...conf.output, publicPath: './' }; 
        
               conf.optimization = { 
        
                 ...conf.optimization, 
        
                 splitChunks: { 
        
                   chunks: 'all', // async对异步引入的代码分割 initial 对同步引入代码分割 all对同步异步引入的分割都开启 
        
                   minSize: 30000, // 字节 引入的文件大于30kb才进行分割 
        
                   minChunks: 1, // 模块至少使用次数 
        
                   maxAsyncRequests: 30, // 同时加载的模块数量最多是_个，只分割出同时引入的前_个文件（按需加载模块） 
        
                   maxInitialRequests: 25, // 首页加载的时候引入的文件最多 _ 个（加载初始页面） 
        
                   automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符 
        
                   cacheGroups: { 
        
                     reactvendor: { 
        
                       test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/, 
        
                       name: 'react-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     codemirror: { 
        
                       test: /[\\/]node_modules[\\/](@codemirror)[\\/]/, 
        
                       name: 'codemirror-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     uiw: { 
        
                       test: /[\\/]node_modules[\\/](@uiw)[\\/]/, 
        
                       name: 'uiw-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     dagred3: { 
        
                       test: /[\\/]node_modules[\\/](dagre-d3)[\\/]/, 
        
                       name: 'dagre-d3-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     momentlodash: { 
        
                       test: /[\\/]node_modules[\\/](moment-mini|lodash|d3-array|d3-geo|d3-shape|dagre)[\\/]/, 
        
                       name: 'momentlodash-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     d3: { 
        
                       test: /[\\/]node_modules[\\/](d3-\w+(-?\w+))[\\/]/, 
        
                       name: 'd3-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     micromark: { 
        
                       test: /[\\/]node_modules[\\/](micromark)[\\/]/, 
        
                       name: 'micromark-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     prismjs: { 
        
                       test: /[\\/]node_modules[\\/](refractor)[\\/]/, 
        
                       name: 'refractor-prismjs-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     runtime: { 
        
                       test: /[\\/]node_modules[\\/](@babel[\\/]runtime)[\\/]/, 
        
                       name: 'babel-runtime-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                     parse5: { 
        
                       test: /[\\/]node_modules[\\/](parse5)[\\/]/, 
        
                       name: 'parse5-vendor', 
        
                       chunks: 'all', 
        
                     }, 
        
                   }, 
        
                 }, 
        
               }; 
        
             } 
        
             return conf; 
        
           };

这是加载 kktrc 配置有问题

https://github.com/kktjs/kkt/blob/bb80fbe66a036d4f1b18ca20fb7d37c386240af4/core/src/utils/conf.ts#L63-L75

// 海外地图
new AMap.Map("container", {
        viewMode: "2D", 
        zoom: 11, 
        center: [116.397428, 39.90923], 
        overseaDataType: "mapbox", // 这个
        vectorMapForeign: "style_zh_cn", //还有这个
      });

// 可下载地图
new AMap.Map("root", {
  zoom: 13,
  center: [116.39, 39.9],
  WebGLParams: {
    preserveDrawingBuffer: true,
  },
});

这个是只需要添加文档，还是在文档中添加示例？

要添加这个参数，不写上就红了

<Map
        animateEnable={false}
        zooms={[8, 13]}
        mapStyle={NORMAL_STYLE}
        center={[...center]}
        WebGLParams={{
          preserveDrawingBuffer: true,
        }}
      >

可下载地图 不明白是个啥需求

海外地图 意思是启用海外访问地图？还是启用查看海外地图？

可下载地图 不明白是个啥需求

海外地图 意思是启用海外访问地图？还是启用查看海外地图？

就是比如说我们想把这个地图截下来放到ppt里，用下面的代码

      html2canvas(document.querySelector('map')).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');

        // 创建一个a标签用于下载图片
        const a = document.createElement('a');
        a.href = imgData;
        a.download = 'screenshot.png'; // 设置下载的图片名称
        a.click();
      });

如果不加那个webgl参数拿到的是这个东西，管啥玩意没有

如果加了下面这个，就可以获得完整的截图了，现在就能加，就是ts报错比较讨厌- -

WebGLParams: {
   preserveDrawingBuffer: true,
}

海外地图是只要给了高德钱，高德就会给开一个权限，就能拿到海外地图的图层，就是要加上面那两个参数

type(map): update option type. (#357)

released v6.0.4 #357

@starInEcust

@starInEcust 更新 v6.0.4

我本来想自己动的，这么晚还给搞，你滴恩情还也还不完~~~

@starInEcust

@starInEcust 很简单，顺手添加了，看看注释是否需要修改，描述是否正确，thx!

Navigation Menu

Repository navigation

新增的kkt是什么 #357

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	import webpack, { Configuration } from 'webpack';
	import { LoaderConfOptions } from 'kkt';
	import lessModules from '@kkt/less-modules';
	import { disableScopePlugin } from '@kkt/scope-plugin-options';
	import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
	import pkg from './package.json';

	export default (conf: Configuration, env: 'production' \| 'development', options: LoaderConfOptions) => {
	conf = lessModules(conf, env, options);
	conf = mdCodeModulesLoader(conf);
	conf = disableScopePlugin(conf);
	// Get the project version.
	conf.plugins!.push(
	new webpack.DefinePlugin({
	VERSION: JSON.stringify(pkg.version),
	}),
	);
	conf.module!.exprContextCritical = false;
	conf.ignoreWarnings = [{ module: /node_modules[\\/]parse5[\\/]/ }];

	if (env === 'production') {
	conf.output = { ...conf.output, publicPath: './' };
	conf.optimization = {
	...conf.optimization,
	splitChunks: {
	chunks: 'all', // async对异步引入的代码分割 initial 对同步引入代码分割 all对同步异步引入的分割都开启
	minSize: 30000, // 字节引入的文件大于30kb才进行分割
	minChunks: 1, // 模块至少使用次数
	maxAsyncRequests: 30, // 同时加载的模块数量最多是_个，只分割出同时引入的前_个文件（按需加载模块）
	maxInitialRequests: 25, // 首页加载的时候引入的文件最多 _ 个（加载初始页面）
	automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符
	cacheGroups: {
	reactvendor: {
	test: /[\\/]node_modules[\\/](react\|react-dom)[\\/]/,
	name: 'react-vendor',
	chunks: 'all',
	},
	codemirror: {
	test: /[\\/]node_modules[\\/](@codemirror)[\\/]/,
	name: 'codemirror-vendor',
	chunks: 'all',
	},
	uiw: {
	test: /[\\/]node_modules[\\/](@uiw)[\\/]/,
	name: 'uiw-vendor',
	chunks: 'all',
	},
	dagred3: {
	test: /[\\/]node_modules[\\/](dagre-d3)[\\/]/,
	name: 'dagre-d3-vendor',
	chunks: 'all',
	},
	momentlodash: {
	test: /[\\/]node_modules[\\/](moment-mini\|lodash\|d3-array\|d3-geo\|d3-shape\|dagre)[\\/]/,
	name: 'momentlodash-vendor',
	chunks: 'all',
	},
	d3: {
	test: /[\\/]node_modules[\\/](d3-\w+(-?\w+))[\\/]/,
	name: 'd3-vendor',
	chunks: 'all',
	},
	micromark: {
	test: /[\\/]node_modules[\\/](micromark)[\\/]/,
	name: 'micromark-vendor',
	chunks: 'all',
	},
	prismjs: {
	test: /[\\/]node_modules[\\/](refractor)[\\/]/,
	name: 'refractor-prismjs-vendor',
	chunks: 'all',
	},
	runtime: {
	test: /[\\/]node_modules[\\/](@babel[\\/]runtime)[\\/]/,
	name: 'babel-runtime-vendor',
	chunks: 'all',
	},
	parse5: {
	test: /[\\/]node_modules[\\/](parse5)[\\/]/,
	name: 'parse5-vendor',
	chunks: 'all',
	},
	},
	},
	};
	}
	return conf;
	};

新增的kkt是什么 #357

Description

Activity

starInEcust commented on May 22, 2024

jaywcjlove commented on May 22, 2024

jaywcjlove commented on May 22, 2024

starInEcust commented on May 22, 2024

jaywcjlove commented on May 22, 2024

starInEcust commented on May 22, 2024

jaywcjlove commented on May 22, 2024

starInEcust commented on May 22, 2024

jaywcjlove commented on May 22, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions