app_scaffold:开发人员构建ZAF v2应用程序的支架

  • w7_514219
  • 193.6KB
  • zip
  • 0
  • VIP专享
  • 0
  • 2022-06-15 09:10
使用此软件须遵守许可文件中规定的重要条款和条件。 App支架 描述 此回购包含一个支架,可帮助开发人员构建。 入门 依存关系 > = 6.11.5 > = 2.0.x 设置 克隆或分叉此仓库 更改( cd )到app_scaffold目录 运行yarn install 您可以使用yarn或npm作为程序包管理器,并使用相应的命令运行脚本。 要在Zendesk中本地运行您的应用程序,您需要最新的 。 在本地运行 要使用?zat=true将应用程序提供给您的Zendesk实例,请运行 yarn run watch zat server -p dist 但为什么? App脚手架包含许多功能,可帮助您维护和扩展应用程序。 下面列出了App Scaffold提供的一些功能。 但是,您不需要任何上述经验就可以成功使用脚手架。 ECMAScript 6,也称为ECMAScript 2015
*Use of this software is subject to important terms and conditions as set forth in the License file* # App Scaffold ## Description This repo contains a scaffold to help developers build [apps for Zendesk products]( ## Getting Started ### Dependencies - [Node.js]( >= 6.11.5 - [Ruby]( >= 2.0.x ### Setup 1. Clone or fork this repo 2. Change (`cd`) into the `app_scaffold` directory 3. Run `yarn install` You can use either `yarn` or `npm` as package manager and run the scripts with the corresponding commands. To run your app locally in Zendesk, you need the latest [Zendesk Apps Tools (ZAT)]( ### Running locally To serve the app to your Zendesk instance with `?zat=true`, run ``` yarn run watch zat server -p dist ``` ## But why? The App Scaffold includes many features to help you maintain and scale your app. Some of the features provided by the App Scaffold are listed below. However, you don't need prior experience in any of these to be able to use the scaffold successfully. - [ES6 (ES2015)]( ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. The App Scaffold includes the [Babel compiler]( to transpile your code to ES5. This allows you to use ES6 features, such as classes, arrow functions and template strings even in browsers that haven't fully implemented these features. - [Zendesk Garden]( UI components Collection of user interface components for Zendesk products. You’ll find components built to respond to a range of user input devices, tuned to handle right-to-left layouts, and finessed with just the right touch of subtle animation. - [Webpack 4]( module bundler Webpack is a module bundler, we use it to bundle up Javascript modules for use as web applications, also to perform tasks like transforming and transpiling, etc. - [PostCSS]( stylesheets PostCSS transforms stylesheets with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. - [StandardJS]( JS linting StandardJS is a Javascript style guide, it helps catching style issues or code errors, and automatically formats code for you. - [Jest]( Javascript testing framework Jest is bundled with JSDom and built on top of Jasmine. It's more than just a ReactJS testing framework. In the Zendesk Apps team, we use it for unit and integration testing of the Official Apps. It also includes a good test coverage toolset out of the box. ## Folder structure The folder and file structure of the App Scaffold is as follows: | Name | Description | |:----------------------------------------|:---------------------------------------------------------------------------------------------| | [`.github/`](#.github) | The folder to store, and, etc | | [`dist/`](#dist) | The folder in which webpack packages the built version of your app | | [`spec/`](#spec) | The folder in which all of your test files live | | [`src/`](#src) | The folder in which all of your source JavaScript, CSS, templates and translation files live | | [`webpack/`](#src) | translations-loader and translations-plugin to support i18n in the application | | [`.babelrc`](#packagejson) | Configuration file for Babel.js | | [`.browserslistrc`](#packagejson) | Configuration file for browserslist | | [`jest.config.js`](#packagejson) | Configuration file for Jest | | [`package.json`](#packagejson) | Configuration file for Project metadata, dependencies and build scripts | | [`postcss.config.js`](#packagejson) | Configuration file for PostCSS | | [`webpack.config.js`](#webpackconfigjs) | Configuration file that webpack uses to build your app | #### dist The dist directory is created when you run the app building scripts. You will need to package this folder when submitting your app to the Zendesk Apps Marketplace, It is also the folder you will have to serve when using [ZAT]( It includes your app's manifest.json file, an assets folder with all your compiled JavaScript and CSS as well as HTML and images. #### spec The spec directory is where all your tests and test helpers live. Tests are not required to submit/upload your app to Zendesk and your test files are not included in your app's package, however it is good practice to write tests to document functionality and prevent bugs. #### src The src directory is where your raw source code lives. The App Scaffold includes different directories for JavaScript, stylesheets, templates, images and translations. Most of your additions will be in here (and spec, of course!). #### webpack This directory contains custom tooling to process translations at build time: - translations-loader.js is used by Webpack to convert .json translation files to JavaScript objects, for the app itself. - translations-plugin.js is used to extract compulsory translation strings from the en.json file that are used to display metadata about your app on the Zendesk Apps Marketplace. #### .babelrc [.babelrc]( is the configuration file for babel compiler. #### .browserslistrc .browserslistrc is a configuration file to specify browsers supported by your application, some develop/build tools read info from this file if it exists in your project root. At present, our scaffolding doesn't reply on this file, [default browserslist query]( is used by [Babel]( and [PostCSS]( #### jest.config.js [jest.config.js]( is the configuration file for Jest #### package.json package.json is the configuration file for [Yarn](, which is a package manager for JavaScript. This file includes information about your project and its dependencies. For more information on how to configure this file, see [Yarn package.json]( #### postcss.config.js postcss.config.js is the configuration file for [PostCSS]( #### webpack.config.js webpack.config.js is a configuration file for [webpack]( Webpack is a JavaScript module bundler. For more information about webpack and how to configure it, see [What is webpack]( ## Helpers The App Scaffold provides some helper functions in `/src/javascripts/lib/helpers.js` to help building apps. ### I18n The I18n (internationalization) module in `/src/javascripts/lib/i18n.js` provides a `t` method to look up translations based on a key. For more information, see [Using the I18n module]( ## Parameters and Settings If you need to test your app with a `parameters` section in `dist/manifest.json`, foreman migh