发电机-加件

约曼生成器MyGeotab/Geotab驱动插件
[!重要的) 加载项生成器当前适用于Yeoman版本 5.0.0。
特性
软件包管理
利用 NPM
本地调试
- 在本地运行和调试外接程序,而不必添加到测试一下数据库。MyGeotabApi模拟传递给外接程序的API对象,以向您测试一下数据库发出请求。
- 模拟状态——Drive插件将尝试使用HTML5功能模拟Android/IOS设备功能(如地理定位)。
- 自动lint您的脚本
- 内置预览服务器与Webpack的开发服务器
- Webpack利用了 ES2015特性 通过使用 巴别塔 装载机
发布构建过程
- 自动lint您的脚本
- 缩小、模糊处理和图像优化
- 沙盒CSS不影响父文档CSS
- 将url转换为部署位置
开始
安装
- 安装依赖关系:
npm install -g [email protected] - 安装发电机:
npm install -g generator-addin - 为您的项目创建一个目录
mkdir <projdir> - 更改为您的项目
cd <projdir> - 运行
yo addin来支撑您的插件
使用
- 运行
npm install <package>安装前端依赖项 - 运行
npm run dev或npm run serve预览和观察更改 - 运行
npm run build构建用于生产的插件 (使用生产文件创建Zip文件以在MyG中进行测试)
文档
MyGeotab
有关MyGeotab和Geotab Drive addins或MyGeotab API的信息,请参阅 MyGeotab SDK
Addin生成器
插件生成器使用Webpack运行,并大量使用Webpack的能力来构建 依赖关系图. 当构建运行时,Webpack获取依赖图并生成一个优化的JS、CSS和HTML文件。
有关Webpack的更全面信息,请访问 Webpack文档
依赖项
Webpack将单独的JavaScript文件视为 模块,这需要用于 main.js 首先导出。 Webpack的模块支持 将为您处理浏览器兼容性。
使用Webpack可以让我们利用npm和它的相关库。例如,跑步 npm install jquery 和放置 import $ from 'jquery'; 在 main.js 会给你访问jQuery库在你的插件。
这个 入口点 对于发电机是 .dev/index.js 对于开发构建和 app/index.js 用于生产。中包含的任何文件 .dev/index.js 不会被捆绑到最终产品中。 推荐的方法 包括依赖项 app/scripts/main.js,因为这将允许文件包含在Webpack的生产和开发环境中。
与老艾丁一起使用
许多旧的插件直接从main.js中运行,并且在主HTML页面中有几个对外部脚本的引用。要使旧的插件与webpack一起运行,您需要将对静态资产的任何引用从 *.html 文件到 main.js:
// in app/scripts/main.js
require('../styles/main.css');
require('../styles/other.css');
// Importing a library downloaded with npm
import Vue from 'vue/dist/vue';
// Importing functions from another file
import { helper1, helper2, helper3 } from './helper.js';
任何正在导入的文件都需要转换为 es2015模块。
与翻译一起使用
要在加载时翻译插件, state.translate(...) 必须被叫进来 initialize() 并将插件的HTML根目录交给:
initialize: function (freshApi, freshState, initializeCallback) {
// Loading translations if available
if (freshState.translate) {
freshState.translate(elAddin || '');
}
// MUST call initializeCallback when done any setup
initializeCallback();
}
您还可以通过使用直接传递句子来翻译句子 state.translate(...). 这对于翻译动态创建的内容(IE)非常有用。JavaScript):
focus: function(api, state){
document.querySelector('#app').textContent = state.translate('Translate this sentence');
}
任何需要翻译的文本都需要添加到 {language}.json 文件,其中 {language} 是一个支持的缩写。
常见问题解答
我必须在我的html文件中引用构建吗? 否。Webpack会自动处理此问题
我需要什么版本的节点? 我们支持节点17。X及以上。推荐使用v22.12.0版本
我一直得到一个错误告诉我regeneratorRuntime没有定义。这是什么意思?
Webpack编译时考虑了兼容性,并将尝试将异步函数转换为与旧版ie浏览器的兼容性。目前有一个Webpack的错误导致transpilation失败,除非 regeneratorRuntime 手动定义。运行 npm i -D regenerator-runtime 和地点 const regeneratorRuntime = require('regenerator-runtime'); 在受影响的文件中
我一直在控制台中收到一条错误消息,告诉我找不到我的文件,但我可以在我的目录中看到它。为什么?
这可能意味着您在主HTML文件中引用了该文件。删除此引用,并将文件导入 main.js。
许可证
apache - 2.0© Geotab Inc