标签: umd

根据Webpack 4文档,如果我指定libraryTarget:'umd',它应该产生以下输出:

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports["MyLibrary"] = factory();
  else
    root["MyLibrary"] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

但是,我得到的是:

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd) …

我想创建一个前端库.因此我想使用webpack.我特别喜欢css和图像加载器.但是,如果我使用webpack,我只能要求非JS文件.因为我正在建立一个图书馆,所以我无法保证我图书馆的用户也会这样做.

有没有办法将所有内容捆绑到UMD模块中进行发布？我尝试使用多个入口点,但是我不能要求模块.

提前致谢

我注意到很多库使用下面的这种风格来定义他们的库.我还注意到第一个自调用函数与Require.js或AMD系统有关,它们总是将工厂作为参数,我将更多地看待Require.js,总是进入Browserify.

为什么主代码传递到括号内的第一个自调用函数的末尾,这是一个闭包,或者只是被认为是一个匿名函数,我将深入研究两者.这有什么好处？它看起来像瓶盖内笔者经过一string,this和callback.

这会给我的库一个干净安全的方法来全局化下面这个例子中的主要对象Please吗？

(function( globalName, root, factory ) {
    if ( typeof define === 'function' && define.amd ) {
        define( [], factory );
    }
    else if ( typeof exports === 'object' ) {
        module.exports = factory();
    }
    else{
        root[globalName] = factory();
    }
}('Please', this, function(){

我正在尝试深入挖掘JavaScript并创建我自己的小型MVC架构,我不想听到我很傻或以前做过,我想挑战自己并学习.

如果有任何很好的资源来创建JavaScript库或甚至更好的MVC库我很想知道.

我安装了package.json这样的reactjs和react-dom

"dependencies": {
   "bootstrap": "^v4.1.1",
   "popper.js": "^1.14.3",
   "react": "^v16.4.1",
   "react-dom": "^16.4.1"
}

它正确下载了react文件夹和react-dom文件夹。

这两个文件夹都有cjs和umd文件夹，并且它们都有很多js文件。

对我来说，无法找到两个文件夹中文件之间的差异。

像这样：

URL: node_modules/react/umd
  react-development.js
  react-production.min.js



URL : node_modules/react/cjs
   react-development.js
   react-production.min.js

与react-dom几乎相同。它还具有cjs和umd文件夹，我不知道应该使用哪个文件夹中的哪个文件来开发React应用程序或网站。

如何创建一个包含Angular 2模块的javascript文件,该模块可以被其他应用程序使用,但是在运行时直接从中央服务器加载并且不捆绑到特定应用程序的代码中？

可以将其视为Angular 2库的CDN.要求是此库的使用者将在其页面上包含单个脚本.

这是以这种方式实现它的要求,所以我对任何建议将库捆绑到单个应用程序的输出文件中的答案不感兴趣.必须在运行时直接从库的服务器加载库脚本.

• 集中式Web应用程序称为CustomAuth
• CustomAuth有一个名为的Angular 2模块 CustomAuthModule
• CustomAuthModule公开了可由外部Angular 2应用程序使用的多个服务和组件.

这是所需的工作流程(从高级别).

• 开发人员希望在名为BookLibrary的Angular2应用程序中使用CustomAuth.
• 在开发人员的索引页面上,他们添加了指向的脚本包含http://server-url/CustomAuth/script.不应要求消费者知道有关systemjs或webpack等模块加载器的任何信息.
• 在他们的angular2代码中,他们从CustomAuth模块(服务,组件等)导入东西.
• 当他们使用angular-cli编译应用程序时,它将不包含CustomAuth代码,而是假设它将在运行时动态加载.

我已经做了很多关于这方面的研究,我没有任何运气可以搞清楚.任何帮助将不胜感激.

我有一个项目结构,其中包含一个文件夹,当我构建我的webpack配置并将每个文件作为输出版本中的子模块时,我想将其动态导入到UMD模块中.

例如,假设我的来源如下:

/src/snippets/red.js
/src/snippets/green.js
/src/snippets/blue.js

我希望webpack将这些源构建到一个模块中,这个模块允许我作为子模块访问每个模块,就像这样;

const red = require('snippets').red

我尝试遍历snippets目录并创建一个带有文件名和路径的对象,但我无法弄清楚哪个配置属性会指示webpack将它们捆绑到一个文件中并导出每个文件.这是我到目前为止所拥有的:

const glob = require('glob')

module.exports = {
    entry: glob.sync('./src/snippets/*.js').reduce((files, file) => {
        files[path.basename(file,'.js')] = file

        return files
    }, {}),
    output: {
      path: __dirname + '/lib',
      filename: 'snippets.js',
      libraryTarget: 'umd'
    }
}

这出错了: Conflict: Multiple assets emit to the same filename ./lib/snippets.js

关于如何实现我正在寻找的东西的任何想法？

我正在尝试使用模块捆绑程序 ParcelJS 构建一个模块。我希望这个特定模块对导入友好：

• 它应该是进口友好的（ES6）
• 它应该是需要友好的（节点）
• 它应该是 script-src 友好的（浏览器）
• 它应该支持UMD约定......

我尝试了以下方法：

测试类.js

export class TestClass {
  constructor(msg) {
    this.msg = msg;
    this.init();
  }
  init() {
    document.body.insertAdjacentHTML('afterbegin', `
    <div class="message">${this.msg}</div>`);
  }
}

index.js（创建包的文件）

//import styling for TestClass
import styles from '../css/styles';

//import class TestClass library
import { TestClass } from './TestClass';

//export TestClass
export default TestClass;

尝试通过运行来创建通用包：parcel index.js --global TestClass

有人可以为我提供有关使用parceljs 导出模块的更多信息/帮助吗？

WARNING: No name was provided for external module 'moment' in output.globals – guessing 'momentImported'
WARNING: No name was provided for external module 'odata-parser' in output.globals – guessing 'parser'

当我尝试将我的库绑定到通用模块定义时收到此消息。警告可以通过在 ng-package.json 中添加 umdModuleIds 来修复。

该文件为我们提供了以下解释：

在编写 UMD 包时，ng-packagr 尽最大努力为 UMD 模块标识符提供通用默认值。此外， rollup 将尽最大努力猜测外部依赖项的模块 ID。即使这样，您也应该确保外部依赖项的 UMD 模块标识符是正确的。如果 ng-packagr 不提供默认值并且 rollup 无法猜测正确的标识符，您应该通过在库的包文件部分中使用 umdModuleIds 来明确提供模块标识符，如下所示：...

umdModuleIds：

外部依赖关系及其对应的 UMD 模块标识符的映射。Map 键是 TypeScript / EcmaScript 模块标识符。映射值是 UMD 模块 ID。此映射的目的是正确捆绑 UMD 模块文件（带有rollup）。默认情况下，支持rxjs,tslib 和@angular/*依赖项符号。

如何查找或检查必须添加到 umdModuleIds …

我正在使用 rollup 来捆绑一个库，并且我希望将外部依赖项与我的代码一起包含在 UMD 捆绑包中。我在文档中找不到任何关于此的有用信息。可能我遗漏了一些明显的东西，但似乎文档仅演示了如何将相关模块标记为外部模块。我一直在努力实现这一目标，但没有成功。可行吗？如果可行，如何实现？

我的代码使用外部组件： src/index.ts

import { ExternalComponent } from \'external-component\'\n\nfunction MyComponent()\xc2\xa0{\n  const externalComponent = ExternalComponent()\n  // ...\n}\n\nexport default MyComponent\n

期望的输出： bundle.umd.js

function ExternalComponent() {\n // ...\n}\n\nfunction MyComponent()\xc2\xa0{\n  const externalComponent = ExternalComponent()\n  // ...\n}\n

rollup.config.js

import babel from \'@rollup/plugin-babel\'\nimport typescript from \'rollup-plugin-typescript2\'\nimport resolve from \'@rollup/plugin-node-resolve\'\nimport { terser } from \'rollup-plugin-terser\'\nimport localTypescript from \'typescript\'\n\nconst CONFIG_BABEL = {\n  extensions: [\'.js\', \'.jsx\', \'.ts\', \'.tsx\'],\n  exclude: \'node_modules/**\',\n  babelHelpers: \'bundled\',\n}\n\nconst CONFIG_TYPESCRIPT = {\n  tsconfig: \'tsconfig.json\',\n  typescript: localTypescript,\n}\n\nconst …

我发现了一些与此相关的StackOverflow问题但没有一个匹配也没有解决我的问题.

我正在ES6中编写一个用于浏览器和服务器的库.我发现,可以在服务器或浏览器(使用几个HTTP请求库冰棒,爱可信).我已经在这两个地方成功使用了这些库,但在我的源代码中导入它们并使用输出的webpacked文件时遇到了一些问题.

我导入axios库的ES6源文件是

import axios from 'axios';

export default {
    go: function() {
        return axios.get('http://www.google.com');
    }
};

我的webpack配置是

var webpack = require('webpack');
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var WebpackNotifierPlugin = require('webpack-notifier');
var path = require('path');
var env = require('yargs').argv.mode;

var libraryName = 'library';
var source = '/src/test.js';

var plugins = [],
    outputFile;

if (env === 'build') {
    plugins.push(new UglifyJsPlugin({
        minimize: true
    }));
    outputFile = libraryName + '.min.js';
} else {
    outputFile = libraryName + '.js'; …