中文

向JavaScript自定义中级开发者的目标前进（１） 〜webpack篇〜

aki • 发表于：2020年08月24日 14:14:58 • 更新于：2021年12月16日 16:21:18

Index

概要

该系列文章主要针对已经熟悉JavaScript开发，接下来向中级水平的目标前进的同学准备的渐进性学习技巧。

本次作为第一阶段介绍如何将webpack导入到kintone自定义。

关于如何导入webpack，请参考以下文章。
webpack入门 ~Babel,Polyfill为你带来美好的ES6体验~ 

那么导入后，如何在kintone开发时用上呢？下面通过举例，并结合5大优点进行介绍。
结合实际情况，将对上述文章（链接）中介绍的设置进行修改。

导入webpack的好处

导入webpack后，可以使用其做各种事情。

使用的编辑器

本系列文章的介绍中使用的是Microsoft公司提供的Visual Studio Code。

vs-code_hero.jpg

Visual Studio Code不仅支持JavaScript的代码，还可以显示命令行，非常的便利。
运行webpack所需的命令可以在Visual Studio Code的命令行工具里执行。

从菜单依次点击[查看] > [终端]，即可以在Visual Studio Code页面下方显示终端，可在那里执行命令。

详情请参考以下页面。
https://code.visualstudio.com/docs

用于多个应用的自定义（配置环境）

在文章开头介绍的文章是关于webpack的导入方法，而本篇是进一步介绍在实际运用中常碰到的“对多个应用进行自定义”。

下面的URL是在进行多个应用自定义时所需的webpack 的设置，请点击下载。

sample-kintone-webpack-for-intermediate

https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate

请git clone或者点击右上方的Clone or download按钮下载Zip文件。
下面的导入方法的详情请参考 Readme。

目录构成

本次的目录构成如下。

devnet-webpack-Page-1__3_.png

src下是有一个apps目录，里面放着各个应用的自定义内容。
各个应用 app1, app2的目录里存放各自应用的自定义文件。
执行以下命令的话，会对各应用的自定义文件分别进行编译。

$ npm run build --mode development # 开发时
# 发布时，使用以下命令执行压缩等操作
# npm run build --mode production

编译完成后，如下图会在dist目录下生成文件名为 app1.js, app2.js等的JavaScript。

Image_1.png

将生成的文件上传到各自的 kintone 应用里，即可进行自定义开发。

src下的common目录里可以对通用的函数以及常量等进行定义。
请根据需要预先在这里定义好，以便于在各自定义中使用。

用于多个应用的自定义（实践）

本系列文章采用在JavaScript代码的简洁写法（翻译中）里介绍的诸如箭头函数等ES6新增的语法来写代码。

1. 分割JS文件

本次以验证顾客列表的邮政编码、TEL、邮件的输入情况（仅日语）这篇Tips中的对输入值进行验证的代码为例。
仅列举对电话号码进行验证的情况。

代码如下。

     //更改事件(电话号码)
    kintone.events.on(['app.record.create.change.TEL',
      'app.record.edit.change.TEL',
      'app.record.index.edit.change.TEL'], event => {
      validTel(event.record, 'TEL');
      return event;
    });

    //保存前事件
    kintone.events.on(['app.record.create.submit',
      'app.record.edit.submit',
      'app.record.index.edit.submit'], event => {
      validTel(event.record, 'TEL');
      return event;
    });
                        
    //检查电话号码的输入
    const validTel = (record, field_code) => {
        // 定义TEL(10位或者11位半角数字)
        const tel_pattern = /^\d{10,11}$/;
        //初始化错误
        record[field_code].error = null;

        // 一旦有输入，就对输入值进行检查
        if (record[field_code].value && !record[field_code].value.match(tel_pattern)) {
          // 如果不符合，对TEL字段报错
          record[field_code].error = '请输入10位或者11位半角数字';
       }
    };

本次仅对电话号码进行验证，如果像Tips那样，对邮政编码以及电话号码都进行验证的话，内容就会特别长。

因此，使用import/export语句可以在其他文件中将验证的处理作为单独模块分开写。

  • 在common/validations.js内写validTel函数，然后export

        //检查电话号码的输入
    export const valiTel = {record, field_code} => {
      //定义TEL(10位或者11位半角数字)
      const tel_pattern = /^\d{10,11}$/;
      //初始化错误
      record[field_code].error = null;
      
      // 一旦有输入，就对输入值进行检查
      if (record[field_code].value && !record[field_code].value.match(tel_pattern)) {
         // 如果不符合，对TEL字段报错
         record[field_code].error = '请输入10位或者11位半角数字';
      }
    };

  • 在app端使用import调用
    使用import可以调用在其他文件中定义的模块。用from指定模块的相对路径。

        import {validTel} from '../../common/validations';
    //更加字段的事件（电话号码）
    kintone.events.on(['app.record.create.change.TEL',
      'app.record.edit.change.TEL', 'app.record.index.edit.change.TEL'], event => {
        validTel(event.record, 'TEL');
        return event;
      });
      
      //保存记录的事件
      kintone.events.on(['app.record.create.submit',
      'app.record.edit.submit','app.record.index.edit.submit'], event => {
        validTel(event.record, 'TEL');
        return event;
      });

像上面那样，export之后可以在其他文件中调用。详情请参考以下技术文档。

import语句 / export语句

2. 重复使用自己创建的函数

如上述中提到那样，Export的内容可以在其他文件中使用。

我们可以像上面的验证函数那样将一些通用的内容单独写在一个文件里，然后export。

这样可以在任意一个文件中进行调用。

也可如下增加验证的种类。

  • 在common/validations.js里添加邮政编码的验证处理

        //检查电话号码的输入
    export const valiTel = {record, field_code} => {
      //定义TEL(10位或者11位半角数字)
      const tel_pattern = /^\d{10,11}$/;
      //初始化错误
      record[field_code].error = null;
      
      // 一旦有输入，就对输入值进行检查
      if (record[field_code].value && !record[field_code].value.match(tel_pattern)) {
         // 如果不符合，对TEL字段报错
         record[field_code].error = '请输入10位或者11位半角数字';
      }
    };

    //以下添加邮政编码验证的代码
    //检查邮政编码的输入
    export const valiZip = {record, field_code} => {
      //定义TEL(7位半角数字)
      const zip_pattern = /^\d{7}$/;
      //初始化错误
      record[field_code].error = null;
      
      // 一旦有输入，就对输入值进行检查
      if (record[field_code].value && !record[field_code].value.match(zip_pattern)) {
         // 如果不符合，对邮政编码字段报错
         record[field_code].error = '请输入7位半角数字';
      }
    };

  • 也要在app端添加邮政编码的验证
    在import的参数里追加要调用的函数，validations.js即可以调用多个函数。

        import {validTel, validZip} from '../../common/validations'; 
    //更加字段的事件（电话号码）
    kintone.events.on(['app.record.create.change.TEL',
      'app.record.edit.change.TEL', 'app.record.index.edit.change.TEL'], event => {
        validTel(event.record, 'TEL');
        return event;
      });
      
      //更改字段的事件（邮政编码）
    kintone.events.on(['app.record.create.change.ZIP',
      'app.record.edit.change.ZIP', 'app.record.index.edit.change.ZIP'], event => {
        validTel(event.record, 'ZIP');
        return event;
      });
      
      //在保存记录的事件处理内添加对邮政编码验证函数的调用
      kintone.events.on(['app.record.create.submit',
      'app.record.edit.submit','app.record.index.edit.submit'], event => {
        validTel(event.record, 'TEL');
        validZip(event.record, 'ZIP');  
        return event;
      });

3. 批量定义应用ID等kintone应用的设计信息 

除了上述自己创建函数之外，还可以批量将各应用的应用ID等定义为常量。
以下例子中，介绍在src/common/app_ids.js这个文件里定义各应用的ID，给app端调用。app3的内容修改如下。

  • app_ids.js

          //定义各应用ID
      const appIds = {
        app1:1,
        app2:2,
        app3:3
      };
      
      //export后其他文件就可以通过import参照了
      export default appIds;

  • app3.js

       import appIds from '../../common/app_ids';  // Export的内容可以通过Import调用
   const events = ['app.record.create.show','app.record.edit.show'];
   kintone.events.on(events, event => {
     //可以使用app_ids里定义的内容
     console.log(appIds.app3);
   
     //使用API时也可以调用
     //获取应用id为1的记录
     kintone.api(kintone.api.url('/k/v1/records',true), 'GET', {app:appIds.app1}) 
       .then(resp => {
         //显示结果
         console.log(resp);
       });
       
       //获取应用id为2的记录
        kintone.api(kintone.api.url('/k/v1/records',true), 'GET', {app:appIds.app2}) 
       .then(resp => {
         //显示结果
         console.log(resp);
       });
   )};

4. 可以使用npm里公开的库

 JavaScript的库大部分发布在npm上，可能您想要实现的功能正好有库可以直接使用了。本次以jQuery为例。

一般情况下，需要把jquery.min.js等文件手动下载到本地，然后再上传到kintone，或者将Cybozu CDN等CDN服务上提供的URL添加到kintone。
通过npm安装库的话，就不需要上述操作了。可以使用刚才提到的import语句来添加。

什么是npm

安装jQuery

输入以下命令并执行。

npm install jquery

执行完后，如下在app1.js中import。

0015f4891cc2abefe247ffcbc79945e

5. 可使用async以及await等特别便利的最新写法

执行$ npm run build生成的dist目录下的JavaScript文件，就是将使用ES6新增的最新语法写的代码转换成在Internet Explorer 11也可以运行的版本。

在JavaScript便利的写法（翻译中）介绍了各种最新的JavaScript的写法。

最后

为了提高kintone JavaScript自定义的水平，本次准备了上述开发环境。
使用这个就可以在多个应用中调用同一个代码，也可以很方便地使用在npm里公开的库，还可以重复使用自己定义的函数以及常量等。

下一篇介绍在进行kintone自定义时的JavaScript文件上传和文件管理等的技巧。

本Tips在2020年2月版的kintone中确认过。


    新手教程

    小程序

    API文档

    开发范例

    插件

    工具

    开发学习视频专栏

    应用场景

    通知

    账号&协议