Webpack + Azure-Storage + Node.js

Question

我正在尝试使用 node.js 并与 webpack 捆绑来读取 azure-storage 文件。但是，我似乎无法将核心 node.js 模块与 webpack 捆绑在一起。尽管一切都编译没有任何问题，但是我得到了运行时错误。查看附加的运行时错误： Chrome Runtime Errors

有人可以帮忙吗？这是我的 webpack 文件：

 const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
    filename: path.relative(process.cwd(), path.join(__dirname, ".", "css", "style.css")),
});

module.exports = env => {
    const plugins = [extractSass];
    if (env && env.substring(0, 4) === "prod") {
        plugins.push(
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                },
                output: {
                    comments: false,
                },
            }),
        );
    }
    return {
        entry: __dirname + '/src/sdlTab.tsx',
        output: {
            path: __dirname + '/dist',
            filename: 'bundle.js',
            libraryTarget: "amd"
        },
        module: {
            rules: [
                {
                    test: /\.(ts|tsx)$/,
                    loader: "ts-loader"
                },
                {
                    test: /\.exec\.js$/,
                    use: ['script-loader']
                },
                {
                    test: /\.scss$/,
                    use: extractSass.extract({
                        use: [
                            {
                                loader: "css-loader",
                                options: { importLoaders: 1 },
                            },
                            {
                                loader: "sass-loader",
                            },
                            {
                                loader: "postcss-loader",
                            },
                        ],
                        fallback: "style-loader",
                    }),
                },
                {
                    test: /\.css$/,
                    use: ["style-loader", "css-loader"],
                }
            ]
        },
        target: "node",
        externals: [
            {
                react: true,
                "react-dom": true
            },
            // Ignore TFS/*, VSS/*, Favorites/* since they are coming from VSTS host
            /^TFS\//,
            /^VSS\//
        ],
        plugins: plugins

    };
};

任何帮助将不胜感激。谢谢

Answer 1

正如内部讨论的那样，我们解决了这个问题，因为其他人可能有同样的问题，这里是答案：

使用新的 Azure Storage V10 SDK npm 包 (@azure/storage-blob)，而不是旧的 SDK npm 包 (azure-storage)。这是因为，V10 SDK npm 包同时支持浏览器和 Node.js 运行时，而 legacy 不支持。

npm install @azure/storage-blob

同时，确保 webpack 配置目标是“web”而不是“node”。

这是一个示例：

1. npm install @azure/storage-blob

2. 更新代码中的accountName、accountSAS和containerName； （确保存储帐户启用 CORS 设置以便从浏览器访问）

3. 直接运行“webpack-cli index.js”来打包。这将默认在“dist”文件夹下生成“main.js”

4. 将“index.html”放在“dist”文件夹下，生成“main.js”

5. 用浏览器打开“html.js”

以下是“index.js”的内容。

import { StorageURL, AnonymousCredential, Aborter, BlockBlobURL } from "@azure/storage-blob";

async function blobToString(blob) {
  const fileReader = new FileReader();
  return new Promise((resolve, reject) => {
    fileReader.onloadend = ev => {
      resolve(ev.target.result);
    };
    fileReader.onerror = reject;
    fileReader.readAsText(blob);
  });
}

async function main() {
  const accountName = "<account>"; // Storage account name
  const accountSAS = "<sas>"; // Storage account SAS token, starting with ?
  const conatinerName = "mycontainer"; // An existing container
  const blobName = `blob${new Date().getTime()}`;

  const pipeline = StorageURL.newPipeline(new AnonymousCredential());
  const blockBlobURL = new BlockBlobURL(
    `https://${accountName}.blob.core.windows.net/${conatinerName}/${blobName}${accountSAS}`,
    pipeline
  );

  const content = "Hello World! This is the blockblob content";
  await blockBlobURL.upload(Aborter.none, content, content.length);

  const downloadBlockBlobResponse = await blockBlobURL.download(
    Aborter.none,
    0
  );
  const blob = await downloadBlockBlobResponse.blobBody;
  const text = await blobToString(blob);

  alert(text);
}

main()
  .then(() => {
    console.log("Executed successfully!");
  })
  .catch(alert);