Skip to content

Commit f363252

Browse files
authored
chore: modify readme about how we want people to acquire Blockly (#7661)
* chore: modify readme about how we want people to acquire Blockly * chore: PR comments
1 parent 3d3cd3f commit f363252

1 file changed

Lines changed: 48 additions & 34 deletions

File tree

scripts/package/README.md

Lines changed: 48 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,10 @@ blocks together to build programs. All code is free and open source.
55

66
The source for this module is in the [Blockly repo](http://github.com/google/blockly).
77

8-
## Installation
9-
10-
You can install this package either via `npm` or `unpkg`.
11-
12-
### npm
13-
14-
```bash
15-
npm install blockly
16-
```
17-
18-
### unpkg
19-
20-
```html
21-
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
22-
```
23-
248
## Example Usage
259

2610
```js
27-
import Blockly from 'blockly';
11+
import * as Blockly from 'blockly/core';
2812
Blockly.inject('blocklyDiv', {
2913
...
3014
})
@@ -34,46 +18,76 @@ Blockly.inject('blocklyDiv', {
3418

3519
For samples on how to integrate Blockly into your project, view the list of samples at [blockly-samples](https://github.com/google/blockly-samples).
3620

37-
### Importing Blockly
21+
## Installation
3822

39-
When you import Blockly with `import * as Blockly from 'blockly';` you'll get the default modules:
40-
Blockly core, Blockly built-in blocks, the JavaScript generator and the English lang files.
23+
You can install this package either via `npm` or `unpkg`.
4124

42-
If you need more flexibility, you'll want to define your imports more carefully:
25+
### unpkg
26+
27+
```html
28+
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
29+
```
4330

44-
#### Blockly Core
31+
When importing from unpkg, you can access imports from the global namespace.
4532

4633
```js
47-
import * as Blockly from 'blockly/core';
34+
// Access Blockly.
35+
Blockly.thing;
36+
// Access the default blocks.
37+
Blockly.Blocks['block_type'];
38+
// Access the javascript generator.
39+
javascript.javascriptGenerator;
40+
```
41+
42+
### npm
43+
44+
```bash
45+
npm install blockly
4846
```
4947

50-
#### Blockly built in blocks
48+
## Imports
49+
50+
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.
5151

5252
```js
53+
// Import Blockly core.
54+
import * as Blockly from 'blockly/core';
55+
// Import the default blocks.
5356
import * as libraryBlocks from 'blockly/blocks';
57+
// Import a generator.
58+
import {javascriptGenerator} from 'blockly/javascript';
59+
// Import a message file.
60+
import * as En from 'blockly/msg/en';
5461
```
5562

56-
#### Blockly Generators
57-
58-
If your application needs to generate code from the Blockly blocks, you'll want to include a generator.
63+
## Requires
5964

6065
```js
61-
import {pythonGenerator} from 'blockly/python';
66+
// Require Blockly core.
67+
const Blockly = require('blockly/core');
68+
// Require the default blocks.
69+
const libraryBlocks = require('blockly/blocks');
70+
// Require a generator.
71+
const {javascriptGenerator} = require('blockly/javascript');
72+
// Require a message file.
73+
const En = require('blockly/msg/en');
6274
```
6375

64-
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'`.
76+
## Applying messages
6577

66-
#### Blockly Languages
78+
Once you have the message files, you also need to apply them.
6779

6880
```js
69-
import * as Fr from 'blockly/msg/fr';
70-
Blockly.setLocale(Fr);
81+
Blockly.setLocal(En);
7182
```
7283

73-
To import the French lang files. Once you've imported the specific lang module, you'll also want to set the locale in Blockly.
74-
7584
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)
7685

86+
## Docs
87+
88+
For more information about how to use Blockly, check out our
89+
[devsite](https://developers.google.com/blockly/guides/overview).
90+
7791
## License
7892

7993
Apache 2.0

0 commit comments

Comments
 (0)