标签: commonjs

我一直在研究如何在NodeJS和浏览器应用程序中使用NodeJS要求(显然在NodeJS应用程序中)和RequireJS用于Web浏览器环境中应用各种模块概念.

然后我意识到一些模块可能对客户端和服务器应用程序都有用,因此可以重用.

如何开发模块以使它们兼容这两种环境？

一个是同步的,一个是异步的.我的第一个想法是利用异步语法,然后为NodeJS定义一个自定义模块,它只是同步调用异步回调.但是,在没有首先使用NodeJS同步回调的情况下,如何将RequireJS仿真器包含到跨环境模块中？

我正在寻找Nashorn的模块系统.据我所知,CommonJS是关于JS模块的方法.我已经查看了列表(这里和这里),并且发现了Java的CommonJS实现方式.

Narwhal不再活跃,它的文档不再托管在GitHub上.是否存在支持Java的现有CommonJS实现,还是应该启动新项目？

那么,另一个问题(如何使用typescript 导入模块)的一般答案是:

1)创建一个blah.d.ts定义文件.

2)使用:

/// <reference path="./defs/foo/foo.d.ts"/>
import foo = require("foo");

关键的是,你需要在 node_modules中的某个地方加载文件foo.d.ts和foo.js; 并且 NAME foo必须与两者完全匹配.现在...

我想回答的问题是如何编写一个可以用这种方式导入的打字稿模块？

可以说我有一个这样的模块:

- xq/
- xq/defs/Q.d.ts
- xq/index.ts
- xq/base.ts
- xq/thing.ts

我想从base.ts导出模块'xq'和'Base'类,从thing.ts导出'Thing'.

如果这是javascript中的节点模块,我的index.ts看起来像:

var base = require('./base');
var thing = require('./thing');
module.exports = {
  Base: base.Base,
  Thing: thing.Thing
};

让我们尝试使用类似的打字稿文件:

import base = require('./base');
export module xq {
    export var base = base.Base;
}

调用它:

tsc base.ts index.ts things.ts ... --sourcemap --declaration --target ES3 
                                   --module commonjs --outDir …

我正在为我的公司准备评估JavaScript模块化方法.我们正在为我们的项目定义"JavaScript最佳实践",模块化是一个核心问题.

从我迄今为止的研究中发现了两种主要方法:

• AMD
• CommonJS的

周围有大量的加载器,插件,库等.

除此之外,还有goog.provide/ goog.require来自Google Closure Library.

还有其他方法需要考虑吗？我错过了哪些重要/相关的规格？

我们的要求简要说明:

• 在单独的文件中构建JavaScript代码.
• 在运行时加载相关模块.
• ...不必将每个文件都包含在脚本标记中.
• 一定不能维护JavaScript文件的索引.
• 支持聚合和缩小 - 构建和使用单个缩小/优化的JavaScript文件的能力.
• 能够以不同的组合使用模块 - 通常有不同的网页/客户端需要不同的模块子集.
• 支持文档(使用JSDoc？).
• 适合测试.
• 适用于网络,跨浏览器.
• 合理的IDE支持.

潜在:

• 与ES6模块对齐.
• 适用于Node.js和移动平台(如PhoneGap/Cordova).

答案的新建议:

• ecmascript-harmony加上额外的编译器.
• angularjs(见下面的注释).
• extjs(见下面的注释).

附注:

• 问题不在于哪种方法更好.
• 我不是要求特定的库和工具,而是要求方法和规范.
• 我并没有特别要求提供场外资源.(如果没有这样的SO标签,我们考虑它可能是不合理的.)
• 关于angualjs或extjs等框架的说明.这不是真正适合这个问题的框架.如果项目需要一个框架(无论是AngularJS还是ExtJS),那么大多数都没有模块化问题,因为框架必须提供模块化OOTB.如果项目不需要框架,那么由于模块化而带来框架是一种过度的做法.这是我特别没有询问库/工具的原因之一.

要将ScrollMagic与GSAP一起使用,您需要加载animation.gsap.js插件.使用Webpack,您可以执行以下操作(假设您使用CommonJS语法并使用npm安装所有内容):

var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');

要确保这实际上有效,您必须为Webpack配置添加别名,以便Webpack知道插件的位置.

resolve: {
  alias: {
    'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
  }
}

不幸的是,当您使用此配置和上面的CommonJS语法时,ScrollMagic会继续抛出错误.

(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

我在angular2中有点困惑.很多例子都表明了

import { Component } from "@angular/core"

但实际上node_module存在angular2目录.所以逻辑上它应该是

import { Component } from "angular2/core" 

这两个有什么区别？

我正在使用Webpack,我想将我的客户端代码分成几个部分,并在用户需要时加载它们.

这是我的文件结构:

app.js       <-- Entry point as introduced to Webpack
Module.js    <-- To be loaded dynamically

app.js和之间没有直接连接Module.js,而第二个文件是由第一个加载的,如下所示:

require.ensure([], (require) => {
    let path = "Module";
    let module = require("./" + path).default;
});

我"./" + path只是用来确保Webpack不会对我很聪明,并尝试静态地解决路径.无论如何,这段代码在webpack-dev-server的开发模式下工作.我的意思Module.js是直到我触发事件来运行上面的代码才下载.然后,它被加载并完美执行.

但是当我打包生产项目时,它就会停止工作.它发出以下错误(在我触发下载事件时在浏览器中),甚至没有尝试发送请求:

未捕获错误:找不到模块'./Module'.

此外,当我动态组合路径时(如上面的代码),构建过程会发出以下警告:

./src/app/app.js中的警告关键依赖项:74:34-47依赖项的请求是表达式

为生产配置Webpack的正确方法是什么,因此它支持动态下载代码拆分？

我已经测试了@wollnyst给出的解决方案,结果如下.当我像这样实现它时,它的工作原理:

require.ensure(["./Module"], (require) => {
    let path = "Module";
    let module = require("./" + path).default;
});

但那不是我想要的,我想这样:

let path = "Module";
require.ensure(["./" + path], (require) => {
    let module = require("./" + path).default; …

我有转换应用程序的Webpack配置:

entry: {
    'polyfill': './app/polyfill.js',
    'lib': './app/lib.js',
    'main': './app/main.js'
},
output: {
    path: './bundles',
    filename: '[name].js',
    sourceMapFilename: '[name].map'
},
...

我想拥有polyfill和main从<script>浏览器中的标签加载,并lib导出为CommonJS库.

lib由Node后端使用,但包含一些app模块,因此它与其他入口点一起构建).正在编译应用程序,因此不可能只在Node中创建require模块./app.

这里有什么选择？是使用单独的Webpack配置和单独的Webpack运行唯一的？

我正在尝试将一个变量注入我的webpack包中的每个模块,以便获得每个文件的JS错误的调试信息.我启用了

node: {
   __filename: true
}

webpack中的当前文件路径

在我的webpack.config中,但我想注入类似的东西

var filename = 'My filename is: ' + __filename;

在编译之前进入每个模块.我已经看到了带有选项的Banner插件,raw但似乎这只会在webpack闭包之外注入横幅而不是我想要的将脚本注入每个模块的结果.

这是我经常遇到的一个问题,我希望找到正确的方法来处理它.

所以我有这样的设置:

parent.js:

export default {
  x: 1
}

a.js:

import parent from 'parent.js'
export default parent.extend(a, { title: 'a' })

b.js:

import parent from 'parent.js'
export default parent.extend(b, { title: 'b' })

很酷,现在我有了一些孩子.但我决定在parent.js中有一个函数来检查对象是否是a或b的实例.

所以我可能这样做:

parent.js:

import a from 'a'
import b from 'b'

export default {
  x: 1,
  checkType (obj) {
    if (obj instanceof a) {
      return 'a'
    } else if (obj instanceof b) {
      return 'b'
    }
  }
}

那么现在这是一个循环依赖.有一种优雅的方式来处理这个问题吗？