@aligov/plugin-gff-ext-module

PC & H5 开放模块构建插件

Usage no npm install needed!

<script type="module">
  import aligovPluginGffExtModule from 'https://cdn.skypack.dev/@aligov/plugin-gff-ext-module';
</script>

README

@aligov/plugin-gff-ext-module

开放扩展模块构建插件,基于 build-script 构建插件体系,构建出 umd 模块。 扩展模块工程模板,详见:https://www.npmjs.com/package/@aligov/tpl-modules-ext

【重要】

本插件从 1.x 版本需要前置配置 build-plugin-component 插件,0.x 版本不需要,已内置 建议升级 1.x 版本

安装

npm i @aligov/plugin-gff-ext-module -D

1.x 版本配置及使用

1.x 版本配置

开发工程的 build.json 中配置插件

  • 最简配置:
{
  "plugins": [
    ["build-plugin-component"],
    "build-plugin-fusion",
    [
      "build-plugin-moment-locales",
      {
        "locales": ["zh-cn"]
      }
    ],
    [
      "@aligov/plugin-gff-ext-module",
      {
        // 独立模块打包配置,key是暴露全局名称下的模块名,例如_extModules.xxx,_extModules.yyy
        "separateModules": {
          "modulesEntry": {
            "xxx": "./src/dir1/index.tsx",
            "yyy": "./src/dir2/index.tsx"
          },
          "library": "_separateModules-[name]"
        }
      }
    ]
  ]
}
  • 全集配置:
{
  "plugins": [
    ["build-plugin-component"],
    "build-plugin-fusion",
    [
      "build-plugin-moment-locales",
      {
        "locales": ["zh-cn"]
      }
    ],
    [
      "@aligov/plugin-gff-ext-module",
      {
        "outputDir": "dist", // 默认可以不配置,默认dist目录
        "libraryTarget": "umd",

        // 独立模块打包配置,key是暴露全局名称下的模块名,例如_extModules.xxx,_extModules.yyy
        "separateModules": {
          "outputDir": "dist", // 默认可以不配置,独立模块打包的目录,最终打包dist/xxx/index.[js|css]
          "modulesEntry": {
            "xxx": "./src/dir1/index.tsx",
            "yyy": "./src/dir2/index.tsx"
          },
          "libraryTarget": "umd",
          "library": "_separateModules-[name]"
        },

        // 默认可以不配置,会读取工程中的src/index.ts[x],打包出module.[js|css]
        "unitedModules": {
          "outputDir": "dist",
          "moduleEntry": "./src/index.?(j|t)s?(x)",
          "filename": "module",
          "libraryTarget": "umd",
          "library": "_extModules"
        },

        // 页面schema单独构建,默认可不填
        "pagesSchema": {
          "outputDir": "dist",
          "schemaEntry": "./src/schema.?(j|t)s?(x)",
          "filename": "schema",
          "libraryTarget": "umd",
          "library": "pagesSchema"
        },

        "globalStyleEntry": "./src/global.scss", // 默认可以不配置,会读取工程中的src/global.[s]css,打包出global.css
        "stylesEntry": "./src/**/*.[s]css", // 默认可以不配置,会读取工程中的src/styles目录下的*.[s]css,打包出css文件,包含层级关系

        "devServer": {} // webpack devServer配置
      }
    ]
  ]
}

配置 package.json 中的 scripts 命令

{
  "scripts": {
    "start": "build-scripts start",
    "build": "build-scripts build",
    "prepublishOnly": "npm run build"
  }
}

1.x 版本使用

# 本地开发
npm start

# 本地构建
npm run build

0.x 版本配置

在 ice 组件开发工程的 build.json 中配置插件

{
  "plugins": [
    [
      "@aligov/plugin-gff-ext-module",
      {
        "devModuleServerOpts": {
          // 可参考http-server的参数
          "ssl": true, // 是否开启https
          "open": false // 是否构建完后打开浏览器访问
        }
      }
    ],
    "build-plugin-fusion",
    [
      "build-plugin-moment-locales",
      {
        "locales": ["zh-cn"]
      }
    ]
  ]
}

配置 package.json 中的 scripts 命令

{
  "scripts": {
    "start": "build-scripts start",
    "build": "build-scripts build",
    "devModule": "build-scripts build --watch-dist --module",
    "prepublishOnly": "npm run build"
  }
}

0.x 版本使用

# 本地开发
npm run devModule

# 本地build
npm run build

0.x 升级 1.x 指南

  • 安装依赖
npm i build-plugin-component@^1.0.0 @aligov/plugin-gff-ext-module@^1.0.0 -D
  • 配置 build.json
{
  "plugins": [
    ["build-plugin-component"],
    "build-plugin-fusion",
    [
      "build-plugin-moment-locales",
      {
        "locales": ["zh-cn"]
      }
    ],
    ["@aligov/plugin-gff-ext-module"]
  ]
}
  • 修改 package.json 中的 scripts 字段,去掉 devModule
{
  "scripts": {
    "start": "build-scripts start",
    "build": "build-scripts build",
-    "devModule": "build-scripts build --watch-dist --module",
    "prepublishOnly": "npm run build"
  }
}

本地开发命令改为:npm start 其他均不变


生成 https 签名证书方法

执行 openssl 命令后,将 key.pem 和 cert.pem 放到 config 目录下

# 首先使用以下命令生成一个证书密钥对 key.pem 和 cert.pem,它将有效期约10年(准确地说是3650天)
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

# 然后便可以起服务测试了,下面两个命令都可以,后者会自动打开默认浏览器运行页面
http-server -S
http-server -S -C cert.pem -o