build: esm cmj 模式打包 less2css (#239)

* fix: types

* build: esm cmj 模式打包 less2css

* ci: node set 18

* build: lodashes to lodash in cjs

* ci: lint trigger

.fatherrc.ts

@@ -1,8 +1,33 @@
 import { defineConfig } from 'father';
+import { IFatherBundlessConfig } from 'father/dist/types';
+
+const less2CssConfig: IFatherBundlessConfig = {
+  transformer: 'babel', // 使用 babel 编译
+  extraBabelPlugins: [
+    [
+      './scripts/babel-less-to-css.js', // 把文件中的 '.less' 字符转为 '.css'
+      { test: '\\.less' },
+    ],
+  ],
+};
 
 export default defineConfig({
-  esm: { output: 'es' },
-  cjs: { output: 'lib' },
+  esm: {
+    output: 'es',
+    ...less2CssConfig,
+  },
+  cjs: {
+    output: 'lib',
+    ...less2CssConfig,
+    alias: {
+      // lodash-es 不支持 cjs 产物，将打包产物修改为从 lodash 引入
+      'lodash-es': 'lodash',
+    },
+  },
+  plugins: [
+    // less 编译为 css
+    './scripts/father-plugin-less.js',
+  ],
   // https://github.com/umijs/father/blob/master/docs/config.md#umd
   umd: {
     name: 'LarkMap',

.github/workflows/lint.yml

@@ -1,21 +1,26 @@
 name: lint
 
-on: [push, pull_request]
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches:
+      - '**'
 
 jobs:
   lint:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install
-    - run: npm run ci
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run ci
     # - name: coverall
     #   if: success()
     #   uses: coverallsapp/github-action@master

.github/workflows/preview.yml

@@ -7,18 +7,18 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-    - uses: afc163/surge-preview@v1
-      with:
-        surge_token: ${{ secrets.SURGE_TOKEN }}
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        dist: docs-dist
-        build: |
-          npm install
-          npm run docs:build
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - uses: afc163/surge-preview@v1
+        with:
+          surge_token: ${{ secrets.SURGE_TOKEN }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          dist: docs-dist
+          build: |
+            npm install
+            npm run docs:build

.github/workflows/release.yml

@@ -1,6 +1,7 @@
 name: release
 
 on:
+  workflow_dispatch:
   release:
     types: [created, edited]
 
@@ -11,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
       - run: npm install
       - run: npm run ci
 
@@ -22,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
       - run: npm install
       - run: npm run docs:build
       - run: |
@@ -38,4 +39,3 @@ jobs:
           directory: docs-dist
           branch: gh-pages
           force: true
-

scripts/babel-less-to-css.js

@@ -0,0 +1,17 @@
+// https://github.com/umijs/father/blob/father-build%401.22.5/packages/father-build/src/getBabelConfig.ts#L25
+
+const transformImportLess2Css = () => {
+  return {
+    name: 'transform-import-less-to-css',
+    visitor: {
+      ImportDeclaration(path) {
+        const re = /\.less$/;
+        if (re.test(path.node.source.value)) {
+          path.node.source.value = path.node.source.value.replace(re, '.css');
+        }
+      },
+    },
+  };
+};
+
+module.exports = transformImportLess2Css;

scripts/father-plugin-less.js

@@ -0,0 +1,17 @@
+// https://github.com/hexh250786313/blog/issues/30
+const { addLoader } = require('father/dist/builder/bundless');
+
+module.exports = async (api) => {
+  const loaders = await api.applyPlugins({
+    key: 'addPostcssLoader',
+    initialValue: [
+      {
+        key: 'less-to-css',
+        test: /\.less$/,
+        loader: require.resolve('./loader-less-to-css'), // less 文件转 css 文件
+      },
+    ],
+  });
+
+  loaders.forEach((loader) => addLoader(loader));
+};

scripts/loader-less-to-css.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const less = require('less');
+const postcss = require('postcss');
+const syntax = require('postcss-less');
+const autoprefixer = require('autoprefixer');
+
+const loader = function (lessContent) {
+  const cb = this.async();
+  this.setOutputOptions({
+    ext: '.css',
+  });
+  postcss([autoprefixer({})])
+    .process(lessContent, { syntax })
+    .then((result) => {
+      // less 转 css
+      less.render(result.content, (err, css) => {
+        if (err) {
+          console.error(err);
+          return;
+        }
+        cb(null, css.css);
+      });
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+};
+
+module.exports = loader;

src/components/LarkMap/helper.ts

@@ -1,5 +1,5 @@
 import type { IMapConfig } from '@antv/l7';
-import { GaodeMap, GaodeMapV1, GaodeMapV2, Map } from '@antv/l7';
+import { BaiduMap, GaodeMap, GaodeMapV1, GaodeMapV2, Map, TencentMap } from '@antv/l7';
 import type { LarkMapProps } from './types';
 
 export const createMap = async (mapType: LarkMapProps['mapType'], mapOptions: Partial<IMapConfig>) => {
@@ -16,14 +16,11 @@ export const createMap = async (mapType: LarkMapProps['mapType'], mapOptions: Pa
   }
 
   if (mapType === 'Tencent') {
-    return Promise.resolve(import('@antv/l7')).then(({ TencentMap }) => {
-      return new TencentMap(mapOptions);
-    });
+    return new TencentMap(mapOptions);
   }
+
   if (mapType === 'Baidu') {
-    return Promise.resolve(import('@antv/l7')).then(({ BaiduMap }) => {
-      return new BaiduMap(mapOptions);
-    });
+    return new BaiduMap(mapOptions);
   }
 
   return Promise.resolve(import('@antv/l7')).then(({ Mapbox }) => {

src/components/Marker/index.tsx

@@ -3,7 +3,7 @@ import { useDeepCompareEffect } from 'ahooks';
 import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useScene } from '../LarkMap/hooks';
-import type { MarkerProps } from './types';
+import type { MarkerEventType, MarkerProps } from './types';
 
 export const Marker = memo<MarkerProps>(function Marker(props): React.ReactPortal {
   const scene = useScene();
@@ -24,7 +24,7 @@ export const Marker = memo<MarkerProps>(function Marker(props): React.ReactPorta
     // @ts-ignore
     const l7marker = new L7Marker(options);
 
-    l7marker.on('click', (e: MouseEvent) => {
+    l7marker.on('click', (e: MarkerEventType) => {
       thisRef.current.props.onClick?.(e);
     });