CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-04 15:40:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: modify readme about how we want people to acquire Blockly (#7661)

Browse Source 
* chore: modify readme about how we want people to acquire Blockly

* chore: PR comments
This commit is contained in:
Beka Westberg
2023-12-01 19:39:41 +00:00
committed by GitHub
parent 3d3cd3fbb0
commit f363252d35
1 changed files with 51 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
scripts/package/README.md
View File

@@ -5,26 +5,10 @@ blocks together to build programs. All code is free and open source.
The source for this module is in the [Blockly repo](http://github.com/google/blockly).
## Installation
You can install this package either via `npm` or `unpkg`.
### npm
```bash
npm install blockly
```
### unpkg
```html
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
```
## Example Usage
```js
import Blockly from 'blockly';
import * as Blockly from 'blockly/core';
Blockly.inject('blocklyDiv', {
...
})
@@ -34,46 +18,76 @@ Blockly.inject('blocklyDiv', {
For samples on how to integrate Blockly into your project, view the list of samples at [blockly-samples](https://github.com/google/blockly-samples).
### Importing Blockly
## Installation
When you import Blockly with `import * as Blockly from 'blockly';` you'll get the default modules:
Blockly core, Blockly built-in blocks, the JavaScript generator and the English lang files.
You can install this package either via `npm` or `unpkg`.
If you need more flexibility, you'll want to define your imports more carefully:
### unpkg
#### Blockly Core
```html
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
```
When importing from unpkg, you can access imports from the global namespace.
```js
// Access Blockly.
Blockly.thing;
// Access the default blocks.
Blockly.Blocks['block_type'];
// Access the javascript generator.
javascript.javascriptGenerator;
```
### npm
```bash
npm install blockly
```
## Imports
Note: Using import of our package targets requires you to use a bundler (like webpack), since Blockly is packaged as a UMD, rather than an ESM.
```js
// Import Blockly core.
import * as Blockly from 'blockly/core';
```
#### Blockly built in blocks
```js
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';
```
#### Blockly Generators
If your application needs to generate code from the Blockly blocks, you'll want to include a generator.
## Requires
```js
import {pythonGenerator} from 'blockly/python';
// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} = require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');
```
to include the Python generator. You can also import `{javascriptGenerator} from 'blockly/javascript'`, `{phpGenerator} from 'blockly/php'`, `{dartGenerator} from 'blockly/dart'` and `{luaGenerator} from 'blockly/lua'`.
## Applying messages
#### Blockly Languages
Once you have the message files, you also need to apply them.
```js
import * as Fr from 'blockly/msg/fr';
Blockly.setLocale(Fr);
Blockly.setLocal(En);
```
To import the French lang files. Once you've imported the specific lang module, you'll also want to set the locale in Blockly.
For a full list of supported Blockly locales, see: [https://github.com/google/blockly/tree/master/msg/js](https://github.com/google/blockly/tree/master/msg/js)
## Docs
For more information about how to use Blockly, check out our
[devsite](https://developers.google.com/blockly/guides/overview).
## License
Apache 2.0