Add docs and samples about bundling for browsers (#5953)

Add bundling docs, samples, and references in storage README files.
This commit is contained in:
Jeff Fisher 2019-10-30 15:07:32 -07:00 коммит произвёл GitHub
Родитель 7a3fbdd990
Коммит 5470ddc7c9
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
33 изменённых файлов: 1063 добавлений и 44 удалений

Просмотреть файл

@ -9,6 +9,7 @@ omitted_paths:
- "sdk/identity/identity/test/manual/*"
- "sdk/cosmosdb/cosmos/samples/*"
- eng/tools/versioning/*
- samples/Bundling/**
language: js
root_check_enabled: True
required_readme_sections:

486
documentation/Bundling.md Normal file
Просмотреть файл

@ -0,0 +1,486 @@
# Bundling Azure SDK libraries for a browser
To use Azure SDK libraries on a website, you need to convert your code to work inside the browser. You do this using a tool called a **bundler**. This process takes JavaScript code written using [Node.js](https://nodejs.org/) conventions and converts it into a format that is understood by browsers.
This document will walk you through the steps required to bundle Azure SDK libraries for your website.
## Install prerequisites
In order to install Azure SDK libraries, you will need to install Node.js and a bunlder of your choice onto your development machine.
### Node.js
First, download and install Node.js from the official website: https://nodejs.org/en/
Once it is installed correctly, you will be able to use it with the `node` command on the command-line:
```
node --version
```
### NPM
The [Node Package Manager](https://npmjs.com) (npm) is included when you install Node. You can access it from the command-line, similar to Node:
```
npm --version
```
## Setting up your project
If you already have a project with a package.json file set up, skip to the next section. If not, first let's make a new directory for your project, and change into it.
```
mkdir example
cd example
```
Now let's [set up a package.json file](https://docs.npmjs.com/creating-a-package-json-file) to configure npm:
```
npm init -y
```
Follow the prompts and npm will generate a starter [package.json](https://docs.npmjs.com/files/package.json) for you.
Now we can install Azure SDK packages. The Azure SDK is composed of many separate packages. You can pick and choose which you need based on the services you intend to use.
For example, if you wish to use the Blob functionality provided by Azure's Storage service, you can install the `@azure/storage-blob` package:
```
npm install --save @azure/storage-blob
```
## Choosing a bundler
Below we show examples of using three popular bundlers: [Webpack](https://webpack.js.org), [Rollup](https://rollupjs.org/), and [Parcel](https://parceljs.org/). The JavaScript ecosystem has a number of other bundlers available as well. Any bundler will likely work well for your project, but each has its own strengths and weaknesses you may wish to consider. If you haven't picked a bundler yet, Webpack is the most commonly used option.
## Using Webpack
First, you need to install [webpack](https://webpack.js.org/) globally:
```
npm install -g webpack webpack-cli
```
Once this is done, you can use webpack by configuring your project in the way that webpack expects.
### Webpack with JavaScript
In order to use Azure SDK libraries inside JS, you need to import code from the package you installed earlier. By default, Webpack will look for a file named `index.js` inside of a `src` folder from where it is run. Create `src/index.js` with the following content:
```js
// src/index.js
const { BlobServiceClient } = require("@azure/storage-blob");
// Now do something interesting with BlobServiceClient :)
```
Now invoke webpack on the command-line:
```
webpack --mode=development
```
This will create a **bundled** version of your code along with the Azure SDK functionality your code depends on. It writes out the brower-compatible bundle to `dist/main.js` by default.
Now you can use this bundle inside an html page via a script tag:
```html
<script src="./dist/main.js"></script>
```
If you want to customize the name or location of your input file, the bundled files, or many other options that webpack provides, you can [create a webpack.config.js configuration file](https://webpack.js.org/concepts/configuration/#simple-configuration).
### Webpack with TypeScript
First, you need to install [TypeScript](https://typescriptlang.org) and a [Webpack loader](https://webpack.js.org/loaders/) for TypeScript:
```
npm install --save-dev typescript ts-loader
```
Now let's create a very basic [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) file to configure TypeScript. If you've already configured TypeScript, you can skip this step. Save the following `tsconfig.json` file next to your `package.json` file you created earlier:
```json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"strict": true,
"module": "es6",
"moduleResolution": "node",
"target": "es6"
}
}
```
For more information on configuring TypeScript with Webpack, check out [Webpack's TypeScript guide](https://webpack.js.org/guides/typescript/).
Similar to our JS example above, let's create an `index.ts` file that imports from `@azure/storage-blob`:
```ts
// src/index.ts
import { BlobServiceClient } from "@azure/storage-blob";
// Now do something interesting with BlobServiceClient :)
```
The last step we need to perform before we can run `webpack` and produce bundled output is set up a basic `webpack.config.js` file:
```js
// webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"]
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
};
```
Now you can invoke webpack on the command-line:
```
webpack --mode=development
```
This will create a **bundled** version of your code plus the Azure SDK functionality that your code depends on and write it out to a `dist` subfolder inside a file named `bundle.js` (as configured in `webpack.config.js`.)
Now you can use this bundled output file inside an html page via a script tag:
```html
<script src="./dist/bundle.js"></script>
```
## Using Rollup
First, you need to install [rollup](https://rollupjs.org/) globally:
```
npm install -g rollup
```
Once this is done, you can use rollup by configuring your project in the way that rollup expects.
### Rollup with JavaScript
In order to use Azure SDK libraries inside JS, you need to import code from the package you installed earlier. Create `src/index.js` with the following content:
```js
// src/index.js
const { BlobServiceClient } = require("@azure/storage-blob");
// Now do something interesting with BlobServiceClient :)
```
Now we need to configure Rollup to take the above code and turn it into a bundle. Save the following `rollup.config.js` file next to your `package.json` file you created earlier:
```js
// rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import cjs from "rollup-plugin-commonjs";
import json from "rollup-plugin-json";
import shim from "rollup-plugin-shim";
export default {
input: "src/index.js",
output: {
file: "dist/bundle.js",
format: "iife",
name: "main"
},
plugins: [
shim({
fs: `
export function stat() { }
export function createReadStream() { }
export function createWriteStream() { }
`,
os: `
export const type = 1;
export const release = 1;
`,
util: `
export function promisify() { }
`
}),
resolve({
preferBuiltins: false,
mainFields: ["module", "browser"]
}),
cjs({
namedExports: {
events: ["EventEmitter"]
}
}),
json()
]
};
```
The above configuration may need to change based on which SDK packages your code references. If you want to customize rollup's configuration file further, you can see [all supported options in their documentation](https://rollupjs.org/guide/en/#configuration-files).
We also need to install the plugins we referenced in the above file:
```
npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-json rollup-plugin-shim
```
Now that we have our config file and necessary plugins installed, we can run rollup:
```
rollup --config
```
This will create a **bundled** version of your code along with the Azure SDK functionality your code depends on. It writes out the brower-compatible bundle to `dist/bundle.js` as configured above.
Now you can use this bundle inside an html page via a script tag:
```html
<script src="./dist/bundle.js"></script>
```
### Rollup with TypeScript
First, you need to install [TypeScript](https://typescriptlang.org):
```
npm install --save-dev typescript
```
Now let's create a very basic [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) file to configure TypeScript. If you've already configured TypeScript, you can skip this step. Save the following `tsconfig.json` file next to your `package.json` file you created earlier:
```json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"strict": true,
"module": "es6",
"moduleResolution": "node",
"target": "es6"
}
}
```
Similar to our JS example above, let's create an `index.ts` file that imports from `@azure/storage-blob`:
```ts
// src/index.ts
import { BlobServiceClient } from "@azure/storage-blob";
// Now do something interesting with BlobServiceClient :)
```
Now we need to configure Rollup to take the above code and turn it into a bundle. Save the following `rollup.config.js` file next to your `package.json` file you created earlier:
```js
// rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import cjs from "rollup-plugin-commonjs";
import json from "rollup-plugin-json";
import shim from "rollup-plugin-shim";
import typescript from "rollup-plugin-typescript2";
export default {
input: "src/index.ts",
output: {
file: "dist/bundle.js",
format: "iife",
name: "main"
},
plugins: [
shim({
fs: `
export function stat() { }
export function createReadStream() { }
export function createWriteStream() { }
`,
os: `
export const type = 1;
export const release = 1;
`,
util: `
export function promisify() { }
`
}),
resolve({
preferBuiltins: false,
mainFields: ["module", "browser"]
}),
cjs({
namedExports: {
events: ["EventEmitter"]
}
}),
json(),
typescript()
]
};
```
The above configuration may need to change based on which SDK packages your code references. If you want to customize rollup's configuration file further, you can see [all supported options in their documentation](https://rollupjs.org/guide/en/#configuration-files).
We also need to install the plugins we referenced in the above file:
```
npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-json rollup-plugin-shim rollup-plugin-typescript2
```
Now that we have our config file and necessary plugins installed, we can run rollup:
```
rollup --config
```
This will create a **bundled** version of your code along with the Azure SDK functionality your code depends on. It writes out the brower-compatible bundle to `dist/bundle.js` as configured above.
Now you can use this bundled output file inside an html page via a script tag:
```html
<script src="./dist/bundle.js"></script>
```
## Using Parcel
First, you need to install [parcel](https://parceljs.org/) globally:
```
npm install -g parcel-bundler
```
Once this is done, you can use parcel by configuring your project in the way that parcel expects.
### Parcel with Javascript
Parcel uses [browserslist](https://github.com/browserslist/browserslist) to configure what polyfills are needed when bundling. Azure SDK libraries generally target the ES2015 version of JavaScript and use some modern features of JavaScript, including [generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*), so let's edit `package.json` to target the latest version of three popular browsers:
```json
"browserslist": [
"last 1 Chrome version",
"last 1 Firefox version",
"last 1 Edge version"
],
```
In order to use Azure SDK libraries inside JS, you need to import code from the package you installed earlier.
To accomplish this, let's create two files, `index.js` and `index.html`:
```js
// index.js
const { BlobServiceClient } = require("@azure/storage-blob");
// Now do something interesting with BlobServiceClient :)
```
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
```
Now you can invoke parcel on the command-line:
```
parcel index.html
```
This will bundle your code and create a local development server for your page at `http://localhost:1234`. Changes you make to `index.js` will automatically get reflected on the dev server.
If you wish to bundle your page without using the local development server, you can do this by passing the `build` command:
```
parcel build index.html
```
This will emit a compiled version of `index.html`, as well as any included script files, to the `dist` directory.
### Parcel with TypeScript
Parcel uses [browserslist](https://github.com/browserslist/browserslist) to configure what polyfills are needed when bundling. The Azure SDK uses some modern features of JavaScript, including [async functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), so let's edit `package.json` to target the latest version of three popular browsers:
```json
"browserslist": [
"last 1 Chrome version",
"last 1 Firefox version",
"last 1 Edge version"
],
```
Next, you need to install [TypeScript](https://typescriptlang.org):
```
npm install --save-dev typescript
```
Now let's create a very basic [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) file to configure TypeScript:
```json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"strict": true,
"module": "es6",
"moduleResolution": "node",
"target": "es6"
}
}
```
For more information on using Parcel with TypeScript, check out the TypeScript guide in Parcel's documentation: https://parceljs.org/typeScript.html
Similar to our JS example above, let's create an `index.ts` file that imports from `@azure/storage-blob`:
```ts
// index.ts
import { BlobServiceClient } from "@azure/storage-blob";
// Now do something interesting with BlobServiceClient :)
```
and also an `index.html` that references it:
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<script src="./index.ts"></script>
</body>
</html>
```
Now you can invoke parcel on the command-line:
```
parcel index.html
```
This will bundle your code and create a local development server for your page at `http://localhost:1234`. Changes you make to `index.js` will automatically get reflected on the dev server.
If you wish to bundle your page without using the local development server, you can do this by passing the `build` command:
```
parcel build index.html
```
This will emit a compiled version of `index.html`, as well as any included script files, to the `dist` directory.
## Examples
For real working examples of using each bundler with both TypeScript and JavaScript, please look at the [samples/Bundling](https://github.com/Azure/azure-sdk-for-js/tree/master/samples/Bundling) folder in this repository.

Просмотреть файл

@ -0,0 +1,32 @@
const { BlobServiceClient } = require("@azure/storage-blob");
function getServiceSasUrl() {
return document.getElementById("serviceSasUrl").value;
}
function showContainerList(containers) {
const outputEl = document.getElementById("output");
// empty previous output
outputEl.textContent = "";
for (const container of containers) {
const containerDiv = document.createElement("div");
containerDiv.textContent = container.name;
outputEl.appendChild(containerDiv);
}
}
async function listContainers() {
const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
let iter = await blobServiceClient.listContainers();
const containers = [];
for await (const container of iter) {
containers.push(container);
}
showContainerList(containers);
}
window.addEventListener("DOMContentLoaded", () => {
const listContainersButton = document.getElementById("listContainers");
listContainersButton.addEventListener("click", () => listContainers());
});

Просмотреть файл

@ -0,0 +1,20 @@
{
"name": "storage-example",
"version": "1.0.0",
"description": "A small example of using the Azure Storage SDK",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "MIT",
"browserslist": [
"last 1 Chrome version",
"last 1 Firefox version",
"last 1 Edge version"
],
"devDependencies": {
"@azure/core-lro": "^1.0.0",
"@azure/storage-blob": "^12.0.0"
},
"dependencies": {}
}

Просмотреть файл

@ -0,0 +1,15 @@
<!-- example of using parcel -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Azure SDK Storage Example</title>
<script src="./index.js"></script>
</head>
<body>
<h1>Azure SDK Storage Example</h1>
<div><label>Blob service SAS URL: <input id="serviceSasUrl"/></label></div>
<div><button id="listContainers">List containers</button></div>
<div id="output"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,35 @@
import { BlobServiceClient, ContainerItem } from "@azure/storage-blob";
function getServiceSasUrl() {
return (document.getElementById("serviceSasUrl") as HTMLInputElement).value;
}
function showContainerList(containers: ContainerItem[]) {
const outputEl = document.getElementById("output");
if (outputEl) {
// empty previous output
outputEl.textContent = "";
for (const container of containers) {
const containerDiv = document.createElement("div");
containerDiv.textContent = container.name;
outputEl.appendChild(containerDiv);
}
}
}
async function listContainers() {
const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
const containers = [];
for await (const container of blobServiceClient.listContainers()) {
containers.push(container);
}
showContainerList(containers);
}
window.addEventListener("DOMContentLoaded", () => {
const listContainersButton = document.getElementById("listContainers");
if (listContainersButton) {
listContainersButton.addEventListener("click", () => listContainers());
}
});

Просмотреть файл

@ -0,0 +1,22 @@
{
"name": "storage-example",
"version": "1.0.0",
"description": "A small example of using the Azure Storage SDK",
"main": "index.js",
"scripts": {
"build": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "MIT",
"browserslist": [
"last 1 Chrome version",
"last 1 Firefox version",
"last 1 Edge version"
],
"devDependencies": {
"@azure/core-lro": "^1.0.0",
"@azure/storage-blob": "^12.0.0",
"typescript": "^3.6.4"
},
"dependencies": {}
}

Просмотреть файл

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Azure SDK Storage Example</title>
<script src="./index.ts"></script>
</head>
<body>
<h1>Azure SDK Storage Example</h1>
<div><label>Blob service SAS URL: <input id="serviceSasUrl"/></label></div>
<div><button id="listContainers">List containers</button></div>
<div id="output"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,10 @@
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"strict": true,
"module": "es6",
"moduleResolution": "node",
"target": "es2017"
}
}

Просмотреть файл

@ -0,0 +1,19 @@
{
"name": "storage-example",
"version": "1.0.0",
"description": "A small example of using the Azure Storage SDK",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "MIT",
"devDependencies": {
"@azure/core-lro": "^1.0.0",
"@azure/storage-blob": "^12.0.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-shim": "^1.0.0"
},
"dependencies": {}
}

Просмотреть файл

@ -0,0 +1,39 @@
import resolve from "rollup-plugin-node-resolve";
import cjs from "rollup-plugin-commonjs";
import json from "rollup-plugin-json";
import shim from "rollup-plugin-shim";
export default {
input: "src/index.js",
output: {
file: "dist/bundle.js",
format: "iife",
name: "main"
},
plugins: [
shim({
fs: `
export function stat() { }
export function createReadStream() { }
export function createWriteStream() { }
`,
os: `
export const type = 1;
export const release = 1;
`,
util: `
export function promisify() { }
`
}),
resolve({
preferBuiltins: false,
mainFields: ["module", "browser"]
}),
cjs({
namedExports: {
events: ["EventEmitter"],
}
}),
json()
]
};

Просмотреть файл

@ -0,0 +1,32 @@
const { BlobServiceClient } = require("@azure/storage-blob");
function getServiceSasUrl() {
return document.getElementById("serviceSasUrl").value;
}
function showContainerList(containers) {
const outputEl = document.getElementById("output");
// empty previous output
outputEl.textContent = "";
for (const container of containers) {
const containerDiv = document.createElement("div");
containerDiv.textContent = container.name;
outputEl.appendChild(containerDiv);
}
}
async function listContainers() {
const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
let iter = await blobServiceClient.listContainers();
const containers = [];
for await (const container of iter) {
containers.push(container);
}
showContainerList(containers);
}
window.addEventListener("DOMContentLoaded", () => {
const listContainersButton = document.getElementById("listContainers");
listContainersButton.addEventListener("click", () => listContainers());
});

Просмотреть файл

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Azure SDK Storage Example</title>
<script src="./dist/bundle.js"></script>
</head>
<body>
<h1>Azure SDK Storage Example</h1>
<div><label>Blob service SAS URL: <input id="serviceSasUrl"/></label></div>
<div><button id="listContainers">List containers</button></div>
<div id="output"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,22 @@
{
"name": "storage-example",
"version": "1.0.0",
"description": "A small example of using the Azure Storage SDK",
"main": "index.js",
"scripts": {
"build": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "MIT",
"devDependencies": {
"@azure/core-lro": "^1.0.0",
"@azure/storage-blob": "^12.0.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-shim": "^1.0.0",
"rollup-plugin-typescript2": "^0.24.3",
"typescript": "^3.6.4"
},
"dependencies": {}
}

Просмотреть файл

@ -0,0 +1,41 @@
import resolve from "rollup-plugin-node-resolve";
import cjs from "rollup-plugin-commonjs";
import json from "rollup-plugin-json";
import shim from "rollup-plugin-shim";
import typescript from "rollup-plugin-typescript2";
export default {
input: "src/index.ts",
output: {
file: "dist/bundle.js",
format: "iife",
name: "main"
},
plugins: [
shim({
fs: `
export function stat() { }
export function createReadStream() { }
export function createWriteStream() { }
`,
os: `
export const type = 1;
export const release = 1;
`,
util: `
export function promisify() { }
`
}),
resolve({
preferBuiltins: false,
mainFields: ["module", "browser"]
}),
cjs({
namedExports: {
events: ["EventEmitter"],
}
}),
json(),
typescript()
]
};

Просмотреть файл

@ -0,0 +1,35 @@
import { BlobServiceClient, ContainerItem } from "@azure/storage-blob";
function getServiceSasUrl() {
return (document.getElementById("serviceSasUrl") as HTMLInputElement).value;
}
function showContainerList(containers: ContainerItem[]) {
const outputEl = document.getElementById("output");
if (outputEl) {
// empty previous output
outputEl.textContent = "";
for (const container of containers) {
const containerDiv = document.createElement("div");
containerDiv.textContent = container.name;
outputEl.appendChild(containerDiv);
}
}
}
async function listContainers() {
const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
const containers = [];
for await (const container of blobServiceClient.listContainers()) {
containers.push(container);
}
showContainerList(containers);
}
window.addEventListener("DOMContentLoaded", () => {
const listContainersButton = document.getElementById("listContainers");
if (listContainersButton) {
listContainersButton.addEventListener("click", () => listContainers());
}
});

Просмотреть файл

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Azure SDK Storage Example</title>
<script src="./dist/bundle.js"></script>
</head>
<body>
<h1>Azure SDK Storage Example</h1>
<div><label>Blob service SAS URL: <input id="serviceSasUrl"/></label></div>
<div><button id="listContainers">List containers</button></div>
<div id="output"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,10 @@
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"strict": true,
"module": "es6",
"moduleResolution": "node",
"target": "es6"
}
}

Просмотреть файл

@ -0,0 +1,15 @@
{
"name": "storage-example",
"version": "1.0.0",
"description": "A small example of using the Azure Storage SDK",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "MIT",
"devDependencies": {
"@azure/core-lro": "^1.0.0",
"@azure/storage-blob": "^12.0.0"
},
"dependencies": {}
}

Просмотреть файл

@ -0,0 +1,32 @@
const { BlobServiceClient } = require("@azure/storage-blob");
function getServiceSasUrl() {
return document.getElementById("serviceSasUrl").value;
}
function showContainerList(containers) {
const outputEl = document.getElementById("output");
// empty previous output
outputEl.textContent = "";
for (const container of containers) {
const containerDiv = document.createElement("div");
containerDiv.textContent = container.name;
outputEl.appendChild(containerDiv);
}
}
async function listContainers() {
const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
let iter = await blobServiceClient.listContainers();
const containers = [];
for await (const container of iter) {
containers.push(container);
}
showContainerList(containers);
}
window.addEventListener("DOMContentLoaded", () => {
const listContainersButton = document.getElementById("listContainers");
listContainersButton.addEventListener("click", () => listContainers());
});

Просмотреть файл

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Azure SDK Storage Example</title>
<script src="./dist/main.js"></script>
</head>
<body>
<h1>Azure SDK Storage Example</h1>
<div><label>Blob service SAS URL: <input id="serviceSasUrl"/></label></div>
<div><button id="listContainers">List containers</button></div>
<div id="output"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,18 @@
{
"name": "storage-example",
"version": "1.0.0",
"description": "A small example of using the Azure Storage SDK",
"main": "index.js",
"scripts": {
"build": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "MIT",
"devDependencies": {
"@azure/core-lro": "^1.0.0",
"@azure/storage-blob": "^12.0.0",
"ts-loader": "^6.2.1",
"typescript": "^3.6.4"
},
"dependencies": {}
}

Просмотреть файл

@ -0,0 +1,35 @@
import { BlobServiceClient, ContainerItem } from "@azure/storage-blob";
function getServiceSasUrl() {
return (document.getElementById("serviceSasUrl") as HTMLInputElement).value;
}
function showContainerList(containers: ContainerItem[]) {
const outputEl = document.getElementById("output");
if (outputEl) {
// empty previous output
outputEl.textContent = "";
for (const container of containers) {
const containerDiv = document.createElement("div");
containerDiv.textContent = container.name;
outputEl.appendChild(containerDiv);
}
}
}
async function listContainers() {
const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
const containers = [];
for await (const container of blobServiceClient.listContainers()) {
containers.push(container);
}
showContainerList(containers);
}
window.addEventListener("DOMContentLoaded", () => {
const listContainersButton = document.getElementById("listContainers");
if (listContainersButton) {
listContainersButton.addEventListener("click", () => listContainers());
}
});

Просмотреть файл

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Azure SDK Storage Example</title>
<script src="./dist/bundle.js"></script>
</head>
<body>
<h1>Azure SDK Storage Example</h1>
<div><label>Blob service SAS URL: <input id="serviceSasUrl"/></label></div>
<div><button id="listContainers">List containers</button></div>
<div id="output"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,10 @@
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"strict": true,
"module": "es6",
"moduleResolution": "node",
"target": "es6"
}
}

Просмотреть файл

@ -0,0 +1,21 @@
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};

Просмотреть файл

@ -25,7 +25,7 @@
- Updates to `BlockBlobClient.uploadStream`
- `maxBuffers` attribute of is renamed to `maxConcurrency`
- Bug Fix - The page object returned from `ContainerClient.listContainers` had its `containerItems` property set to an empty string instead of an empty array if the storage account has no blob containers. The issue is fixed in this new release.
- The default browser bundle has been removed from the npm package. Bundling your application with a bundler such as Webpack is the recommended approach to building a browser bundle.
- The default browser bundle has been removed from the npm package. Bundling your application with a bundler such as Webpack is the recommended approach to building a browser bundle. For details on how to do this, please refer to our [bundling documentation](https://github.com/Azure/azure-sdk-for-js/blob/master/documentation/Bundling.md).
## 2019.10 12.0.0-preview.5

Просмотреть файл

@ -30,7 +30,7 @@
- Added default values for parameters, bufferSize = `8MB` and maxConcurrency = `5`
- [Breaking] Bug Fix - The page object returned from `ContainerClient.listContainers` had its `containerItems` property set to an empty string instead of an empty array if the storage account has no blob containers. The issue is fixed in this new release.
- `BlobClient.downloadToBuffer()` helper method has a new overload where it is not required to pass the `Buffer`. Attributes `offset` and `count` are optional, downloads the entire blob if they are not provided.
- [Breaking] The default browser bundle has been removed from the npm package. Bundling your application with a bundler such as Webpack is the recommended approach to building a browser bundle.
- [Breaking] The default browser bundle has been removed from the npm package. Bundling your application with a bundler such as Webpack is the recommended approach to building a browser bundle. For details on how to do this, please refer to our [bundling documentation](https://github.com/Azure/azure-sdk-for-js/blob/master/documentation/Bundling.md).
## 2019.10 12.0.0-preview.5

Просмотреть файл

@ -91,6 +91,10 @@ Or
const AzureStorageBlob = require("@azure/storage-blob");
```
### JavaScript Bundle
To use this client library in the browser, you need to use a bundler. For details on how to do this, please refer to our [bundling documentation](https://github.com/Azure/azure-sdk-for-js/blob/master/documentation/Bundling.md).
### CORS
You need to set up [Cross-Origin Resource Sharing (CORS)](https://docs.microsoft.com/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services) rules for your storage account if you need to develop for browsers. Go to Azure portal and Azure Storage Explorer, find your storage account, create new CORS rules for blob/queue/file/table service(s).

Просмотреть файл

@ -5,8 +5,8 @@ Azure Files offers fully managed file shares in the cloud that are accessible vi
This project provides a client library in JavaScript that makes it easy to consume Microsoft Azure File Storage service.
> Note: This package was previously published under the name `@azure/storage-file`.
It has been renamed to `@azure/storage-file-share` to better align with the upcoming new package
for Azure Storage Files DataLake and provide a consistent set of APIs for working with files on Azure.
> It has been renamed to `@azure/storage-file-share` to better align with the upcoming new package
> for Azure Storage Files DataLake and provide a consistent set of APIs for working with files on Azure.
Version: 12.0.0-preview.6
@ -96,17 +96,9 @@ Or
const AzureStorageFileShare = require("@azure/storage-file-share");
```
### JavaScript bundle
### JavaScript Bundle
To use the library with JS bundle in the browsers, simply add a script tag to your HTML pages pointing to the downloaded JS bundle file(s):
```html
<script src="https://mydomain/azure-storage-file-share.min.js"></script>
```
The JS bundled file is compatible with [UMD](https://github.com/umdjs/umd) standard, if no module system found, following global variable(s) will be exported:
- `azfile`
To use this client library in the browser, you need to use a bundler. For details on how to do this, please refer to our [bundling documentation](https://github.com/Azure/azure-sdk-for-js/blob/master/documentation/Bundling.md).
### CORS

Просмотреть файл

@ -3,26 +3,24 @@
## 2019.11 12.0.0
- [Breaking] The custom browser and retry policies that are specific to the Storage libraries have been
renamed to have the `Storage` prefix. [PR 5862](https://github.com/Azure/azure-sdk-for-js/pull/5862).
Below are the entities that now have the Storage prefix
- BrowserPolicy
- BrowserPolicyFactory
- RetryPolicy
- RetryPolicyType
- RetryOptions
- RetryPolicyFactory
renamed to have the `Storage` prefix. [PR 5862](https://github.com/Azure/azure-sdk-for-js/pull/5862).
Below are the entities that now have the Storage prefix
- BrowserPolicy
- BrowserPolicyFactory
- RetryPolicy
- RetryPolicyType
- RetryOptions
- RetryPolicyFactory
- [Breaking] The interface `NewPipelineOptions` has been renamed to `StoragePipelineOptions` and its
properties have been updated as below:
- The `proxy` property of type `ProxySettings | string` has been renamed to `proxyOptions` and
will be of type `ProxyOptions`. If you have been passing url directly, split the value into `host`
and `port` then pass it as a json object.
- The `telemetry` property of type `TelemetryOptions` has been renamed to `userAgentOptions` of
type `UserAgentOptions`.
- The `logger` is no longer a property available to configure. To enable logging, please see the
[Troubleshooting](https://github.com/Azure/azure-sdk-for-js/blob/0ddc2f3c3d4658b20d96910acc37a77e5209e5e3/sdk/storage/storage-queue/README.md#troubleshooting) section of our readme.
properties have been updated as below: - The `proxy` property of type `ProxySettings | string` has been renamed to `proxyOptions` and
will be of type `ProxyOptions`. If you have been passing url directly, split the value into `host`
and `port` then pass it as a json object. - The `telemetry` property of type `TelemetryOptions` has been renamed to `userAgentOptions` of
type `UserAgentOptions`. - The `logger` is no longer a property available to configure. To enable logging, please see the
[Troubleshooting](https://github.com/Azure/azure-sdk-for-js/blob/0ddc2f3c3d4658b20d96910acc37a77e5209e5e3/sdk/storage/storage-queue/README.md#troubleshooting) section of our readme.
- [Breaking]
- The `UniqueRequestIdPolicy` and `KeepAlivePolicy` are no longer exported from this library. The
- The `UniqueRequestIdPolicy` and `KeepAlivePolicy` are no longer exported from this library. The
corresponding policies from the `@azure/core-http` library are meant to be used instead.
- [Breaking] The default browser bundle has been removed from the npm package. Bundling your application with a bundler such as Webpack is the recommended approach to building a browser bundle. For details on how to do this, please refer to our [bundling documentation](https://github.com/Azure/azure-sdk-for-js/blob/master/documentation/Bundling.md).
## 2019.10 12.0.0-preview.5

Просмотреть файл

@ -4,26 +4,27 @@
- This release marks the general availability of the `@azure/storage-queue` package.
- [Breaking] The custom browser and retry policies that are specific to the Storage libraries have been
renamed to have the `Storage` prefix. [PR 5862](https://github.com/Azure/azure-sdk-for-js/pull/5862).
Below are the entities that now have the Storage prefix
- BrowserPolicy
- BrowserPolicyFactory
- RetryPolicy
- RetryPolicyType
- RetryOptions
- RetryPolicyFactory
renamed to have the `Storage` prefix. [PR 5862](https://github.com/Azure/azure-sdk-for-js/pull/5862).
Below are the entities that now have the Storage prefix
- BrowserPolicy
- BrowserPolicyFactory
- RetryPolicy
- RetryPolicyType
- RetryOptions
- RetryPolicyFactory
- [Breaking] The interface `NewPipelineOptions` has been renamed to `StoragePipelineOptions` and its
properties have been updated as below:
- The `proxy` property of type `ProxySettings | string` has been renamed to `proxyOptions` and
properties have been updated as below:
- The `proxy` property of type `ProxySettings | string` has been renamed to `proxyOptions` and
will be of type `ProxyOptions`. If you have been passing url directly, split the value into `host`
and `port` then pass it as a json object.
- The `telemetry` property of type `TelemetryOptions` has been renamed to `userAgentOptions` of
- The `telemetry` property of type `TelemetryOptions` has been renamed to `userAgentOptions` of
type `UserAgentOptions`.
- The `logger` is no longer a property available to configure. To enable logging, please see the
- The `logger` is no longer a property available to configure. To enable logging, please see the
[Troubleshooting](https://github.com/Azure/azure-sdk-for-js/blob/0ddc2f3c3d4658b20d96910acc37a77e5209e5e3/sdk/storage/storage-queue/README.md#troubleshooting) section of our readme.
- [Breaking]
- The `UniqueRequestIdPolicy` and `KeepAlivePolicy` are no longer exported from this library. The
- The `UniqueRequestIdPolicy` and `KeepAlivePolicy` are no longer exported from this library. The
corresponding policies from the `@azure/core-http` library are meant to be used instead.
- [Breaking] The default browser bundle has been removed from the npm package. Bundling your application with a bundler such as Webpack is the recommended approach to building a browser bundle. For details on how to do this, please refer to our [bundling documentation](https://github.com/Azure/azure-sdk-for-js/blob/master/documentation/Bundling.md).
## 2019.10 12.0.0-preview.5

Просмотреть файл

@ -79,6 +79,10 @@ Or
const AzureStorageQueue = require("@azure/storage-queue");
```
### JavaScript Bundle
To use this client library in the browser, you need to use a bundler. For details on how to do this, please refer to our [bundling documentation](https://github.com/Azure/azure-sdk-for-js/blob/master/documentation/Bundling.md).
### CORS
You need to set up [Cross-Origin Resource Sharing (CORS)](https://docs.microsoft.com/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services) rules for your storage account if you need to develop for browsers. Go to Azure portal and Azure Storage Explorer, find your storage account, create new CORS rules for blob/queue/file/table service(s).