标签: umd

我知道 browserify 可以通过转换来使用 UMD 模块，但是当我想使用 browserify 构建一个库时，我该如何构建一个 UMD 模块？我可以使用任何转换吗？

我正在使用具有以下设置的 webpack 编写一个库：

output: {
    path: path.join('build'),
    filename: 'my_lib.js',
    library: 'MyLib',
    libraryTarget: 'umd'
  },

我的图书馆：

export default function() {
  console.log('MyLib');
}

问题是，当我尝试在浏览器中加载 build/my_lib.js 时，访问 MyLib 的唯一方法是通过 MyLib.default ...

任何的想法？

我正在开发一个对模块使用import/export样式语法的打字稿项目。我想将所有打字稿文件编译成一个文件。这是我的tsconfig.json 的样子，

{
  "compilerOptions": {
    "module": "UMD",
    "noImplicitAny": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "strictNullChecks": true,
    "target": "ES5",
    "lib": [
      "es2016",
      "dom"
    ],
    "outFile": "dist/beetl.js"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

当我运行tsc命令时，出现以下错误，

错误 TS6082：与 --outFile 一起仅支持“amd”和“system”模块。

我不想使用 AMD 或 System 而我想要 UMD，我该如何实现？

我正在尝试构建一个简单的文件，该文件依赖于使用 UMD 导出构建的库。

// main.ts
import { parseTree } from 'jsonc-parser';

const tree = parseTree('{ "name: "test" }');

console.log(tree);

它编译得很好，但是 webpack 会抛出依赖错误：

哈希：85004e3e1bd3582666f5 版本：webpack 2.3.2 时间：959ms 资产大小 块 块名称 dist/bundle.js 61.8 kB 0 [emitted] main build/main.d.ts 0 bytes [emitted] [0] ./~/jsonc-解析器/lib/main.js 40.1 kB {0} [内置] [1] ./~/jsonc-parser/lib 160 字节 {0} [内置] [2] ./~/path-browserify/index.js 6.18 kB {0} [内置] [3] ./~/process/browser.js 5.3 kB {0} [内置] [4] ./src/main.ts 200 字节 {0} [内置] [5] ./ ~/vscode-nls/lib 160 字节 {0} [可选] [内置] [6] ./~/vscode-nls/lib/main.js 5.46 …

我在过去两天尝试了这个，但我无法让它像预期的那样工作：我想构建我自己的 JavaScript 库并将它注册到一个已经存在的命名空间（“OCA” - 在这种特殊情况下）。正如您可能理解的那样，我不想被迫放弃现代方法，例如通过打字稿或模块进行类型安全。

因此，我使用webpack 2和 thelibraryTarget: umd在“OCA.Ocr”下注册输出（我的库名为“Ocr”）。这像预期的那样工作，但是当涉及到我想要使用的点时，例如underscorejs，因为它将在应用程序中全局可用，库也应该交付给，我无法让它工作。我遵循了 webpack 配置文档，它说externals配置选项应该是要走的路：

externals: { // object
    angular: "this angular", // this["angular"]
    react: { // UMD
      commonjs: "react",
      commonjs2: "react",
      amd: "react",
      root: "React"
    }
  }
  // Don't follow/bundle these modules, but request them at runtime from the environment

我按照指南的建议使用它，但它不起作用：

/* global __dirname, require, module*/

const webpack = require("webpack");
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const path = require("path");

module.exports = function (env) {
  let target …

我读了这篇文章，我想使用 D3.js (v4+) 仅使用这样的 import 语句：

import { selection } from '../node modules/d3/build/d3.js';

但是，因为代码输出是UMD（或读取this）并且无法导入，因为某些全局变量未定义，并且 ES6 无法解析例如中的绝对名称node_modules，并且 vanilla 不支持没有扩展名的 import 语句，如下所示：

import * as someFeature from './myAwesomeModule';

这是导入模块的模式，每一天都在成长，就像你在这里看到的那样。

今天我如何在没有任何插件的情况下使用 import 语句？

使用Babel 7（针对模块UMD配置）

import '@babel/polyfill';
import Popper from 'popper.js';

被移植到

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    //...
  } else {
    var mod = {
      exports: {}
    };
    factory(global.polyfill, global.popper);
    global.site = mod.exports;
  }
})(/* ... */);

当popper.js lib在global中将自身定义为global.Poopper时，global.popper用小写字母表示-第一个字母用大写字母表示。

一年前，我已经读过一些有关此类UMD问题的信息-但现在在Internet上找不到详细信息。因此，请向我说明如何避免此类问题（不使用Rollup及其工具）。

PS global.polyfill也是胡说八道。

实际上，我只是想在没有webpack的情况下使用Babel和以“旧方式”使用requirejs-将文件逐个文件传输到js文件夹，然后使用加载每个脚本<script>。正如对其工具的研究一样。但这是很难的。

我试图在我用打字稿编写的客户端 javascript 库中使用把手，当我使用时，import * as Handlebars from 'handlebars'我收到一条错误消息，说打字稿“找不到模块打字稿”

我试过导入import * as Handlebars from 'handlebars/runtime'而不是handlebars没有运气。

我在这里发现了一个类似的问题，并尝试将把手替换添加到我的 tsconfig 文件中，这对查找模块没有帮助

我觉得指定我正在运行 umd 编译很重要的原因是，如果我将它设置为 commonjs 编译，那么找到该参考似乎没有问题，但是从我进行的研究中，仅在您需要时才推荐使用 commonjs将该库用作 nodejs 应用程序（可能在服务器环境中运行）的一部分，因为这是我正在创建的客户端库，我不相信这是一个合适的解决方案，尽管有人可能能够证明我错了。针对 umd 似乎提供了 commonjs 和 amd 编译，所以我认为这将是“两全其美”的解决方案

配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "umd",
    "strict": true,
    // "paths": {
    //   "handlebars": ["handlebars/dist/handlebars.min.js"]
    // },
    "esModuleInterop": true   
  }
}

包json：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test …

我有一个 UMD 库，以下内容在 commonjs 中工作......

global.window = global;
var DoSomething = require("../dist/sce-umd.js").DoSomething;
(function(){
    var instance = new DoSomething();
    instance.doSomethingElse();
})()

我正在尝试用 ESM 做同样的事情，比如......

(()=>{
    // Needed for UMD
    global.window = global;
    import("../dist/sce-umd.js").then((OtherThing)=>{

        console.log("This is the next level");
        const other = new OtherThing();
        other.doSomethingElse();
    });
})();

但我明白...

类型错误：OtherThing 不是构造函数

我也尝试过，new OtherThing.DoSomething()但我得到...

类型错误：OtherThing.DoSomething 不是构造函数

我正在制作一个模块，我希望它可以在浏览器和 Node.js 中使用。它依赖于性能，这给我使用 Webpack 和 Node.js 中的 perf_hooks 模块带来了麻烦。无论我做什么，我只能在其中之一起作用的地方得到它，但不能同时得到两者。

以下是我尝试过的大部分内容。我的问题是，如何配置 Webpack 以在节点中需要 perf_hooks，但在浏览器中使用内置的性能全局？

这是我的基本 Webpack 配置：

const path = require('path');

module.exports = {
  entry: './src/UpdateLoop.js',
  mode: 'development',
  output: {
    library: 'UpdateLoop',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist'),
    filename: 'updateloop.js',
    globalObject: 'this',
  },
};

给我带来麻烦的代码：

const { performance } = require('perf_hooks');

webpack 中出现此错误：

Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\joe.jankowiak\projects\update-loop\src\node_modules doesn't exist or is not a directory

我已经看到“fs”执行以下操作的建议：

// configuration.node has an unknown property 'perf_hooks'
  node: { …