?制作
在本地使用 TypeScript 开发 Google AppsScript
现在任何人 帮助您入门的模板。
▶︎▶︎▶︎ 使用 TypeScript 开始 Google AppsScript 开发的模板 ◀︎◀︎◀︎
使项目尽可能简单
“使用 TypeScript 开发 GoogleAppsScript”
我在项目中几乎没有包含不相关的内容。
当过去我有很多文件时
因为我是一个不再思考哪个文件适用于什么的人，
由于过去为我制作它，它变得简单。
?♀️目标受众
我有以下愿望：
我们假设您有一些 GAS 开发经验。
突然从一个没有GAS开发经验的状态
“让我们用 TypeScript + Webpack + Clasp 在本地开发 GAS！”
可能有太多新事物，障碍可能太高。
“非程序员的 GAS 讲座”
既然有人发表过超验资料，
我希望你能在那里学习，等你适应了 GAS 再回到这里。
→ 我们将为非程序员发布 GAS 讲座资料。 （兼容V8引擎）
?♂️ 我们能做什么
大致
・表扣
・Webpack
・打字稿
由三个
与在通常的 Web 编辑器上开发 GAS 相比
您可以受益于：
- 扣环的好处
⭕️ 使用 git 进行版本控制
⭕️ 您可以使用自己喜欢的编辑器（VSCode 等）
Clasp 是 Google 制作的工具。
这允许您在本地进行 GAS 开发，而不是使用通常的 Web 编辑器。
上面提到的两个好处是
两者都受益于能够在当地发展。
- 从 Webpack 中受益
⭕️ 单独的开发目录
⭕️ 你可以使用 npm 包
Webpack 使用分散在各处的文件（模块）
这是一个很好的捆绑器（模块捆绑器）。
npm 包是一个图像，类似于“任何人都可以使用的方便的东西，由世界各地的工程师制作”。
通过使用 Webpack，您甚至可以在 GAS 开发中使用 npm 包。
当我开始讲解 Webpack 和 npm 时，无论有多少行都不够
我只是要放一个链接，链接到这里伟大的前辈写的一篇非常容易理解的文章。
这里的内容很深，
如果你问我能不能完全理解/能不能用，我还有很长的路要走。
因为不是一朝一夕就能明白的，
让我们在阅读相关文章/书籍的同时移动您的手来获取它。
・【对于初学者】从概念上理解 NPM 和 package.json
・ 我还是不懂 webpack（第 1 集）
・了解webpack和Babel的基础知识（一）-webpack edition-
- 受益于 TypeScript
⭕️ 可以用类型开发
TypeScript 就像高级 JavaScript (AltJS)
它可以像静态类型语言一样开发，语法与 JavaScript 几乎相同。
GoogleAppsScript 主要是 JavaScript，因此很容易编写
在您运行它之前，您不知道该程序是否会按预期工作。
（动态类型）
当程序变得更大更复杂时，
开发难度大，或者说有点吓人，
换句话说，我想要一个静态类型的元素。
就当↑
这次我做了一个可以用 TypeScript 开发的模板。
“首先什么是 TypeScript？”
“我从来没有这么多用过 TypeScript，我应该怎么学？”
对于那些说
" 生存打字稿 因为有一个超然的场所叫
请阅读这个。
↓ 最重要的是，似乎最好先阅读的部分
・ TypeScript 诞生的背景
・ 为什么你应该使用 TypeScript
・ 静态类型
?♂️ 如何开始使用模板开发
0. 假设
已经创建了一个空的 GAS 项目，并且
如果您希望能够在本地开发↑，这是该过程。
如果您尚未创建 GAS 项目，请单击此处
→ https://script.google.com/home/start
如果您是第一次，请点击以下链接 启用 Google Apps 脚本 API 别忘了。
→ https://script.google.com/home/usersettings
Ubuntu: 18.04.6 LTS node: v16.16.0 npm: 8.18.0 clasp: 2.4.1 webpack: 5.74.0 webpack-cli: 4.10.0 TypeScript: 4.8.3操作确认环境②：Mac
MacOS: 11.6 node: v16.17.1 npm: 8.15.0 clasp: 2.4.1 webpack: 5.74.0 webpack-cli: 4.10.0 TypeScript: 4.8.3
1.访问模板
▶︎▶︎▶︎ 使用 TypeScript 开始 Google AppsScript 开发的模板 ◀︎◀︎◀︎
2. 按[使用此模板]按钮
* 如果你没有登录github，【使用这个模板】按钮是不会出现的！
对于那些说“我没有 github 帐户?”的人
跳过步骤 2 和 3
" 4.依次执行以下命令 ]。
另外，当时在“（1）克隆模板”中要执行的命令是
改为运行以下命令：
# ①' テンプレートをクローン git clone https://github.com/matcher-inc/gas-template my-gas-project对于那些说“我对模板了解不多，但我想尝试使用它们?”的人
跳过步骤 2 和 3
" 4.依次执行以下命令 ]。
另外，当时在“（1）克隆模板”中要执行的命令是
改为运行以下命令：
# ①' テンプレートをクローン git clone https://github.com/matcher-inc/gas-template my-gas-project
3.按[从模板创建存储库]按钮
所有者 存储库名称 说明 公共/私人请设置为您方便。
4.依次执行以下命令
# ① テンプレートをクローン git clone <テンプレートから新規作成したリポジトリのURL> my-gas-project # ② ディレクトリを移動 cd my-gas-project # ③ 必要なモジュールをインストール npm install
5.将脚本ID粘贴到 .clasp.json
通过将之前创建的空 GAS 项目的脚本 ID 粘贴到 .clasp.json
链接【本地开发环境⇄在线GAS项目】。
.clasp.json
{
"scriptId" : "ここに スクリプトID を貼り付ける" ,
"rootDir" : "./dist/"
}
对于那些说“我不知道如何找到我的脚本 ID ?”的人
如何找到您的脚本 ID
→ [GAS] 如何查看脚本ID | Identifier 来确定项目
6.进行Clasp用户认证（第一次使用Clasp时）
如果您是 Clasp 新手，
需要通过执行以下命令来进行 Clasp 用户认证。
（如果您以前使用过 Clasp 并已完成此设置，则可以跳过它。）
# Clasp のユーザー認証を行う npx clasp login --no-localhost对于那些想在执行命令后了解更多有关程序的人?
运行上述命令会产生以下输出，
“如果您想进行 Clasp 用户认证，请访问本站！”
并且会发出一个 URL。
按照说明复制并访问 URL
按照屏幕上的说明进行用户身份验证。
$ npx clasp login --no-localhost Logging in globally… ? Authorize clasp by visiting this url: https://accounts.google.com/o/oauth2/v2/auth?very-very-long-query # ←この URL コピーしてアクセス！ Enter the code from that page here:
如果您按照访问目的地屏幕上的指示进行身份验证，
最后，将颁发授权码。
复制颁发的验证码
Enter the code from that page here:
将其粘贴到它所在的位置，然后按 Enter 键完成身份验证！
7.检查 npm run deploy 是否可以正常执行
如果到目前为止设置正确，则执行 npm run deploy
・与 Webpack 捆绑
・通过Clasp在线反映开发内容
你应该能够做到这两点。
执行 npm run deploy 会是这个样子↓ OK！
$ npm run deploy > gas-template@1.0.0 deploy > webpack && clasp push asset bundle.js 3.87 KiB [ emitted] ( name: main ) runtime modules 891 bytes 4 modules cacheable modules 234 bytes ./src/index.ts 170 bytes [ built] [ code generated] ./src/sample_module/index.ts 64 bytes [ built] [ code generated] webpack 5.74.0 compiled successfully in 1853 ms └─ dist/appsscript.json └─ dist/bundle.js Pushed 2 files.
--
如果它不起作用，请检查以下几点。
? npm install 是否安装了所需的模块？
→ 如果 node_modules 文件夹为空，则无法执行 npm install 。
? 脚本 ID 是否正确粘贴在 .clasp.json 中？
→ 如果你在这里弄错了，即使你可以与 Webpack 捆绑
Clasp 不能很好的反映在线上的开发内容。
? 是否完成了 Clasp 用户身份验证？
→ 如果您忘记了这一点，则本地开发的内容
无法使用 Clasp 在线反映。
参考： 6.进行Clasp用户认证
? npm run deploy 的执行位置是否正确？
→ 如果您按照文章中描述的程序，
检查是否可以在 my-gas-project 目录中运行 npm run deploy 。
❗️ 使用模板开发时的注意事项
- 如何在 src/index.ts 中声明函数
在网上反映本地开发的内容后，
在您常用的网络编辑器上选择并执行功能
要设置触发器，
我们需要稍微调整一下函数声明方法。
尤其是， 将函数声明为 gloabl 对象的属性 是需要的。
src/index.ts
// 他ファイルで宣言されている関数を import
import { sampleFunc } from ' sample_module ' ;
// import した関数を golbal オブジェクトに func1 という名前で埋め込み
( global as any ). func1 = sampleFunc ;
// アロー関数を global オブジェクトに func2 という名前で埋め込み
( global as any ). func2 = (): void => {
const msg : string = ' hello hello !! ' ;
console . log ( msg );
};
↑ 通过声明这样的函数，
func1, func2 可以在常用的网络编辑器上选择/执行，
您可以设置触发器。
- 每次都覆盖开发内容的反映
我使用 Clasp 来反映我在本地在线开发的内容。
Clasp对开发内容的所有反映都被覆盖 是。
是因为，
“我们已经在某种程度上开发了网页编辑器，
我想从中途切换到本地 TypeScript 开发。”
在这种情况下，请小心。
一旦本地内容在网上反映出来，
在网络编辑器上开发的所有内容都将被覆盖和丢失。
因此，除非在开始使用模板开发时有特殊情况，
避免链接正在开发的GAS项目，
通过创建一个新的空 GAS 项目开始开发 推荐的。
? 项目文件简要说明
- dist 文件夹
src 文件夹中的文件是
由 Webpack 捆绑在一起，
完成的文件 bundle.js 会放在这里。
还有一个名为 appsscript.json 的配置文件，
不碰这个也没关系。
- node_modules 文件夹
这是使用 npm 命令安装的软件包所在的位置。
“使用 npm 命令安装什么”基本上在 package.json 中有描述
npm install 将根据 package.json 的内容进行安装。
由于上述原因，node_modules 文件夹的内容被排除在 git 管理之外。
（在 .gitignore 中设置）
- src 文件夹
这个文件夹基本上是用于开发的。
Webpack 配置中的“src 文件夹中的 index.ts”
由于我试图从
始终创建 index.ts 请如此。
（↑设置写在webpack.config.js中）
- .clasp.json
Clasp 的配置文件。
・针对哪个 GAS 项目（scriptId）
・推送哪个文件（rootDir）
是写的。
.clasp.json
{
"scriptId" : "<Script ID>" ,
"rootDir" : "./dist/"
}
在 <Script ID>
粘贴并使用您的脚本 ID。
- .gitignore
一个文件，用于指定您不希望 git 管理的内容。
在本次创建的模板中，以下3个被指定为非托管。
node_modules：因为可以从.package.json的内容中恢复 dist/bundle.js：因为它可以通过与 webpack 捆绑来恢复 .clasp.json：因为描述了脚本ID-package.json
npm install 这是我希望您在 npm install 安装的软件包列表。
（别误会，就像购物清单一样）
还有package-lock.json，
它与 package.json 相似但不同。
非常简要地解释一下，
・package.json → 购物 “做” 列表
・package-lock.json → 购物 “做过” 列表
这是一个像
↑的详细解释以通俗易懂的方式写在下面的文章中。
如果您有兴趣，请阅读它。
→ 什么是 package-lock.json？
- 稀有 D。医学博士
这只是一个描述。
海外版奇塔式的地方 但我要写一篇文章并发表，所以
README.md 是用英文编写的。
（如果您能指出英语中的任何错误或不清楚的地方，我将不胜感激......！?）
-tsconfig.json
此文件包含与 TypeScript 相关的设置。
您不必弄乱此模板的基础知识。
-webpack.config.js
此文件包含 Webpassck 的设置。
同样，您不必弄乱此模板的基础知识。
? 获取电子表格值的示例开发步骤
最后，获取电子表格中的值并在控制台中显示它们
本节介绍使用模板开发简单项目的过程。
1. 创建一个新的电子表格
这里 创建一个新的空白电子表格
让我们像↓一样适当地放置值。
2.选择扩展→应用程序脚本
↓ 当网页编辑器打开时，复制脚本 ID 并记下它。
（用于稍后粘贴到 .clasp.json 中）
3. 使用模板准备开发
让我们按照程序进行吧！
（如果你能像 npm run deploy 那样做就可以了！）
参考： ?♂️ 如何开始使用模板开发
如果 npm run deploy 有效，
我认为网络编辑器看起来像这样↓，所以请检查它。
（如果没有，请尝试刷新屏幕）
4.在src/index.ts中加入如下代码
src/index.ts
import { sampleFunc } from ' sample_module ' ;
// embed imported module function
( global as any ). func1 = sampleFunc ;
// embed arrow function
( global as any ). func2 = (): void => {
const msg : string = ' hello hello !! ' ;
console . log ( msg );
};
+ ( global as any ). getSheetData = () => {
+ // スクリプトプロパティから スプレッドシートID を取得 → 無ければ処理中断
+ const ssId = PropertiesService . getScriptProperties (). getProperty ( ' SSID ' );
+ if ( ! ssId ) return ;
+
+ // スプレッドシートを取得 → シートを名前で取得 → 無ければ処理中断
+ const spreadsheet = SpreadsheetApp . openById ( ssId );
+ const sheet = spreadsheet . getSheetByName ( ' シート1 ' );
+ if ( ! sheet ) return ;
+
+ // データがある範囲を取得 → 範囲内のデータを全て取得
+ const data = sheet . getDataRange (). getValues ();
+
+ // 取得したデータを 1行 ずつ表示
+ data . forEach (( row , index ) => {
+ console . log ( `data[ ${ index } ]: ${ row } ` );
+ });
+ };
+
5.在脚本属性中设置电子表格ID
① 复制电子表格 ID
(2) 从 GAS 网页编辑器设置脚本属性
6.运行 npm run deploy
用 Webpack 打包开发内容，用 Clasp 在线反映开发内容。
↓ 如果你运行它，它看起来像这样，OK！
$ npm run deploy > gas-template@1.0.0 deploy > webpack && clasp push asset bundle.js 4.43 KiB [ emitted] ( name: main ) runtime modules 891 bytes 4 modules cacheable modules 704 bytes ./src/index.ts 640 bytes [ built] [ code generated] ./src/sample_module/index.ts 64 bytes [ built] [ code generated] webpack 5.74.0 compiled successfully in 2053 ms └─ dist/appsscript.json └─ dist/bundle.js Pushed 2 files.
7. 在网页编辑器中选择并执行getSheetData
如果 npm run deploy 运行良好
getSheetData 现在应该是可选择的。
（如果无法选择，请尝试刷新页面）
运行 getSheetData 到
如果将电子表格数据打印到控制台，您就成功了！
? 奖励：npm 脚本
到目前为止 npm run XXX （npm 脚本）
我只介绍 npm run deploy ，
其实我还准备了一些其他的东西，就给大家介绍一下。
解释得很简单，
通过在 package.json 中设置
您可以以一种好的方式准备您想要执行的命令。
↓ 设置写在 package.json 中。
我想如果你看看这里就很容易理解。
・ [现代 JavaScript #13] 使用 npm 脚本轻松执行命令！我不再使用 Gulp 或 Grunt！
・ npm 脚本可以做的 3 件事你永远不知道
# Webpack で src 内のファイルをひとまとめに (バンドル) する npm run build # src 内の変更を検知して、自動的に Webpack がバンドルするようにする npm run build:watch # Clasp で dist 内のファイルをオンライン上にアップロードする npm run push # dist 内の変更を検知して、自動的に Clasp がオンライン上にアップロードする npm run push:watch # [ Webpack でバンドル → Clasp でオンライン上にアップロード] を一度に行う npm run deploy
在开发过程中，我基本上
・ npm run build:watch
・ npm run push:watch
并同时运行
开发内容很快被Webpacked，
立即反映在网上 至
↑ 这是推荐的，因为你不必每次都做 npm run deploy ！
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308629109.html
查看更多关于任何人都可以立即在本地开始开发 Google AppsScript 的模板（适合初学者）的详细内容...