标签: commonjs

我正在使用量角器和打字稿对角度应用程序进行一些端到端测试。在设置过程中我发现我必须使用：

要求（“ts节点/注册”）

由于我是node.js的新手，我想知道为什么这里需要“/register”以及为什么我不能只使用require(“ts-node”)？

ERROR in ./node_modules/cpu-features/build/Release/cpufeatures.node 1:2\nModule parse failed: Unexpected character \'\xef\xbf\xbd\' (1:2)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n(Source code omitted for this binary file)\n @ ./node_modules/cpu-features/lib/index.js 3:16-60\n @ ./node_modules/ssh2/lib/protocol/constants.js 7:12-35\n @ ./node_modules/ssh2/lib/server.js 26:4-38\n @ ./node_modules/ssh2/lib/index.js 33:10-32\n @ ./src/app.js 3:19-34\n\nERROR in ./node_modules/ssh2/lib/protocol/crypto/build/Release/sshcrypto.node 1:2\nModule parse failed: Unexpected character \'\xef\xbf\xbd\' (1:2)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. …

这是什么原因:

exports.foo = 'foo';

var bar = require('./foo');
console.log(bar); // {foo: 'foo'}

但这不是:

var data = { foo: 'foo' };
exports = data;

var bar = require('./foo');
console.log(bar); // {}
// expected {foo: 'foo'}

在CJS模块中,我将使用export和var plugin = require('plugin');     导出/导入
在ES6模块中我将使用export和import * as plugin from 'plugin';导出/导入.

是否有更多的语法差异？这些^差异是否正确？

什么export default和export *？

对于由定义main的npm模块文件package.json，我正在考虑以下模式：

import Struct from './src/struct'

module.exports = Struct
module.exports.default = Struct

为了支持CommonJS和ES6导入：

const Struct = require('my-module')
// or
import Struct from 'my-module'

该公约是否有任何可能导致意外问题的弊端？

我要解决的问题是必须迫使软件包的使用者坚持使用ES6或CommonJS，因为这两种方法似乎都不太好用：

const Struct = require('my-module').default
// or
import * as Struct from 'my-module'

在进一步考虑这一点之后，这样定义我的课程/src/struct.js会更好吗？

export default class Struct {
  static get default () {
    return Struct
  }
  ...
}

我在 Typescript 中遇到了 Mocha 测试的问题，我担心它与 Babel 有关，但我真的不确定发生了什么。

本质上，我有一个正在导出到文件中的函数

// src/my-ts-lib/tests/components/factoryMocks/componentConfigMocks.ts

...

export function getRandomConfig(type?: string): ComponentConfig {
  const randomComponentType = type || randomType();
  return {
    type: randomComponentType,
    config: configLibrary[randomComponentType]
  }
}

并被导入到另一个被测试调用的地方：

// src/my-ts-lib/tests/components/RouteComponent/mocks/routeMocks.ts

...

import { getRandomConfig } from '../../factoryMocks/componentConfigMocks';

..

export const getSingleRouteConfigMock = (componentType?: string): RouteProps => {
  const defaultComponentType = 'PageLayout';
  return {
    childComponent: {
      type: componentType || defaultComponentType,
      config: getRandomConfig(componentType || defaultComponentType)
    },
    pageName: randomString(),
    path: randomString(),
  };
};

...

运行测试时，我收到以下错误：

RouteCompnent/mocks/routeMocks.ts:10
      config: getRandomConfig(componentType || …

目前，该项目有一个 CommonJS 模块，用于存储仅在一个文件中维护的配置值：

module.exports = {
  classA: `classA`,
  classB: `classB`
  classC: `classC`
}

这允许稍后重用它们来生成 JS 选择器，方法是：

const CLASSES = require('./classes')

const SELECTORS = Object.keys(CLASSES).reduce((obj, key) => {
  const selectorKey = key.replace(`class`, `selector`)

  obj[selectorKey] = `.${CLASSES[key]}`

  return obj
}, {})

module.exports = SELECTORS

选择器稍后也会在代码逻辑中使用，并传递给 PostCSS 配置，后者生成要在.pcss文件中使用的变量列表。

这一切都非常方便，有助于开发流程，而且 CommonJS 允许在需要时仅将特定值导入组件，例如：

import { classA } from './path/classes

它的工作就像一个梦想，而且仍然如此，但是，在打字稿文件中以相同的方式导入它不满足 tslint 约束，并且它会发出错误警告： Could not find a declaration file for module implicitly has an 'any' type：：

这是tsconfig.json

{
  "compilerOptions": {
    "target": "esnext", …

我正在构建一个 React 应用程序。总的来说，我对 React 和 JS 都很陌生。

我尝试将swiperjs库导入到现有的 React 项目中：

import React, { Component } from "react";
import { Swiper, SwiperSlide } from 'swiper/react';

function HomeBanner(props) {

    return (
        <div >
            <div>
                <img src="img/slider/home-3/home-banner/1.jpg" alt="" />
                <div className="">
                    <h5>Mega Sale Nov 2019</h5>
                    <h3>
                        Double Combo With <br />
                        The Body Shop
                    </h3>
                    <p>Sale up to <strong>50% Off </strong></p>
                    <a className="ps-btn" href="#">Shop Now</a>
                </div>
            </div>
            <div>
                <img src="img/slider/home-3/home-banner/2.jpg" alt="" />
                <div className="">
                    <h5>Mega Sale Nov 2017</h5>
                    <h3>
                        IKEA Minimalist …

编写包含 es6 模块的 NPM 包，最好的做法是将源文件分开

package.json
esm
 index.js
 Content1
  Content1A.js
  Content1A.js.map
  Content1B.js
  Content1B.js.map
 Content2
  Content2A.js
  Content2A.js.map
  Content2B.js
  Content2B.js.map

引用index.js子文件夹中的内容，还是将其捆绑到一个文件中是更好的做法

package.json
esm
 contents.js
 contents.js.map

似乎第一种方法对 CommonJS 模块有优势，因为它使消费者可以直接从源导入，从而跳过未使用的导入index.js（因为 CommonJS 模块不可进行树摇动），但对于 es6 模块，这个参数就消失了。

你有一个有状态的Node.js模块吗？喜欢:

exports.connectionsCache = new (function () {
    var cache = {};

    this.getOrCreate = function (url) {
        if (!cache[url]) {
            cache[url] = new Connection(url);
        }
        return cache[url];
    };
}());

这个州能不会有多次require通话？或者应该使用一个简单的全局对象？

从这个网站阅读，我了解到使用 commonjs 意味着当浏览器完成下载文件时，它必须将它们一一加载，因为它们相互依赖。但是使用AMD，它可以同时加载多个文件，这样即使文件a依赖于文件b，文件a的一部分也可以在文件b完成之前执行？

CommonJS 模块：该标准的主要实现是在 Node.js 中（Node.js 模块有一些超出 CommonJS 的功能）。特点：语法紧凑，专为同步加载和服务器而设计

异步模块定义 (AMD)：该标准最流行的实现是 RequireJS。特点：语法稍微复杂一些，使AMD能够在没有eval()（或编译步骤）的情况下工作专为异步加载和浏览器而设计

我有一个 WebPack 项目，其中使用 CommonJS 结构导入模块。

现在我需要导入ePOS_SDK_JavaScript_v2.7.0库（文件“epos-2.7.0.js”）。
但它不是有效的 CommonJS 模块。

如何在我的项目中导入库？

谢谢

我有这段代码可以在 CommonJS 上运行，但我想将我的项目切换到 ES6，但我得到的错误是.bindisn\xe2\x80\x99t 函数，所以我想知道是否有人知道我如何切换它超过。

for (const file of player) {\n  const event = import(`./player/${file}`);\n\n  Storage.player.on(file.split(".")[0], event.bind(null, client));\n}\n