标签: commonjs

我正在阅读这篇文章,关于承诺抽象的部分对我来说似乎有点过于复杂.以下是一个例子:

requestSomeData("http://example.com/foo") // returns a promise for the response
    .then(function(response){ // ‘then’ is used to provide a promise handler
        return JSON.parse(response.body); // parse the body
    }) // returns a promise for the parsed body
    .then(function(data){
        return data.price; // get the price
    }) // returns a promise for the price
    .then(function(price){ // print out the price when it is fulfilled
        print("The price is " + price);
    });

在我看来,以下可以用更少的代码行提供相同的结果:

requestSomeData("http://example.com/foo")
    .requestHandler(function(response){
        // parse the body
        var data  = JSON.parse(response.body);

        // …

建立:

• BabelJS(es2015,反应,阶段-1)
• 的WebPack
• React/redux

CommonJS和ES6的新功能.我知道对象实例和方法的静态容器之间的区别,但我不确定它们在分离到模块时的行为方式.所以我想知道返回一个实例之间的区别是什么(这个模式是否有效？):

// StateParser.js

class StateParser {
    constructor() {
     }

     method1() {
        ...
     }

}

export default new StateParser()

并导出const方法:

// StateParser.js

let state = {
}

export const method1 = () => { ... }

1. 方法A:每次导入时都会有新的实例吗？

2. 方法B:使用对象解构的能力之一是:

   import { method1 } from '../utils/StateParser.js';
   

   Run Code Online (Sandbox Code Playgroud)

   然后使用method1,就好像它存在于本地？

3. 方法A:在构造函数中初始化状态的能力有哪些好处？

所以基本上我不确定何时使用哪个实用程序类,并希望您的输入.

您可以在这里查看我的示例项目：https://github.com/DanKaplanSES/typescript-stub-examples/tree/JavaScript-import-invalid

我创建了这个名为 main.ts 的文件：

import uuid from "uuid";\n\nconsole.log(uuid.v4());\n\n

虽然打字稿适合这种导入，但当我尝试node main.js，它会给出以下错误：

console.log(uuid_1["default"].v4());\n                              ^\n\nTypeError: Cannot read property \'v4\' of undefined\n    at Object.<anonymous> (C:\\root\\lib\\main.js:5:31)\n\xe2\x86\x90[90m    at Module._compile (internal/modules/cjs/loader.js:1063:30)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Module.load (internal/modules/cjs/loader.js:928:32)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Function.Module._load (internal/modules/cjs/loader.js:769:14)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at internal/main/run_main_module.js:17:47\xe2\x86\x90[39m\n

如果我将文件更改为此，它会正常执行：

console.log(uuid_1["default"].v4());\n                              ^\n\nTypeError: Cannot read property \'v4\' of undefined\n    at Object.<anonymous> (C:\\root\\lib\\main.js:5:31)\n\xe2\x86\x90[90m    at Module._compile (internal/modules/cjs/loader.js:1063:30)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Module.load (internal/modules/cjs/loader.js:928:32)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Function.Module._load (internal/modules/cjs/loader.js:769:14)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at internal/main/run_main_module.js:17:47\xe2\x86\x90[39m\n …

JavaScript框架,如Prototype,jQuery,YUI,MooTools,Dojo等.所有这些似乎都是针对客户端开发人员的,重点是使用更少的代码更有效地实现通用用户交互模式.

随着服务器端JavaScript的出现,这些框架是否打算采用CommonJS标准来实现其库函数重用于服务器端JavaScript,还是允许其他框架(如Node和Narwhal)处理服务器端用例？

(我意识到这个问题危险地接近可以讨论但没有回答的问题,但我认为Stack Overflow社区实际上可以用特定的引用回答这个问题.)

我正在尝试使用rails资产管道实现一些事情,这比我希望的更难.

为了干净地构建应用程序,我计划为javascript使用模块系统.为此,我想使用CommonJS模块,但我想使用新的ES6语法编写它们以便将来兼容.

我找到了资产管道的ES6模块转换器扩展,它运行良好,但这只能将其转换为CommonJS格式.我仍然需要将此解析为浏览器所理解的JS.为此,我正在寻找使用Browserify但我的问题在于结合这两个.

模块转换器基于每个文件工作,但browserify通过检查所需的所有文件来工作.问题是browserify不能使用原始文件,因为它们不是CommonJS格式,它们在ES6中,所以它需要转换后的版本,但是因为这发生在管道中,我不能指向浏览器化文件.

这有什么办法吗？

更新 - 相关:如何module.exports =预置到webpack包？

我有webpack编译简单module.exports = "asdfasdf"到foo.js

在server.js我有一个节点var foo = require("./foo.js")

当我console.log(foo)得到一个空物体{}

我究竟做错了什么？？

我的webpack配置:

module.exports = {
    entry: "./test.js",
    output: {
        filename: "./foo.js"
    },
    target: "node",
    module: {
        loaders: [
            {
                exclude: /(node_modules|bower_components)/,
                loader: "babel?presets[]=react,presets[]=es2015"
            }
        ]
    },
    devtool: "#source-map"
};

预期

我应该能够导出我的App组件文件并将其导入我的index.js.

结果

我收到以下错误

React.createElement:type无效 - 期望一个字符串(用于内置组件)或一个类/函数(用于复合组件)但得到:object

我的index.js

const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./components/App');
require('./index.css');

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

然后在我的components/App.js中

const React = require('react');

export default class App extends React.Component {
    render() {
        return (
            <div>
                Hell World! Wasabi Sauce!
            </div>
        );
    }
}

// module.exports = App;

如果我取消注释module.exports = App;它将工作,但我正在尝试使用导出语法.是什么驱使我坚果是在另一个项目我在这里做完全相同的事情,它的工作正常:(

根据官方网站，保存电子文件的正确方法是：

npm install electron --save-dev

实际上，运行该应用程序需要使用Electron（实际上是：）require()，这与此处票数最高的答案背道而驰。那么，即使是一个例外，为什么还要例外呢？

所以，我正在尝试做一些表面上应该非常简单的事情......

我在以下定义了一些常量：` //constants.js

module.exports = {
 MY_CONSTANT: "TEST"
}

` 我有一个我正在尝试测试的文件，它有一个这样的分支语句：

`

//file to test
//...

if(CONSTANTS.MY_CONSTANT === "TEST")
{...}
...

`

我有一个这样的测试：`

//test


 it("Should do something when MY_CONSTANT === "TEST, () => {
    //This is fine as it is exported as TEST
    })


 it("Should do something else when MY_CONSTANT !== "TEST, () => {
    //This seems annoyingly difficult to get working...
    })

`

我试过这个 - 运气不好，它不会改变实际值

我试过改变常量导出来导出一个对象（那没有用）

我试过在我的测试文件中为常量添加一个 jest.mock(..) 并在测试中做一个 unmock 我不需要它们被嘲笑。

我尝试在测试函数中添加 jest.doMock(...) 我需要更改值。（连同 jest.resetModules 和另一个需要）

我已经尝试将 jest.doMock(...) …

请帮我解决问题：在此处输入图片描述

成功构建并在具有角度通用的浏览器上运行后，我遇到了这个问题

这是我的包 json ：

{
  "name": "ssr",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "10.0.5",
    "@angular/cdk": "10.1.0",
    "@angular/common": "10.0.5",
    "@angular/compiler": "10.0.5",
    "@angular/core": "10.0.5",
    "@angular/fire": "^6.0.2",
    "@angular/forms": "10.0.5",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^10.0.5",
    "@angular/material": "10.1.0",
    "@angular/material-moment-adapter": "10.1.0",
    "@angular/platform-browser": "10.0.5",
    "@angular/platform-browser-dynamic": "10.0.5",
    "@angular/platform-server": "^10.0.5",
    "@angular/router": "10.0.5",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@ng-toolkit/universal": "^8.1.0",
    "@nguniversal/express-engine": "^10.0.1",
    "@types/jquery": "^3.5.1",
    "@types/node": "^8.10.62",
    "angular-in-memory-web-api": "^0.11.0",
    "angular-ng-autocomplete": "^2.0.1",
    "classlist.js": "^1.1.20150312",
    "codelyzer": "^6.0.0",
    "core-js": "2.6.9",
    "crypto-js": "^3.3.0",
    "express": "^4.15.2",
    "firebase": "^7.17.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "localstorage-polyfill": "^1.0.1",
    "moment": "2.24.0",
    "ng2-slim-loading-bar": …