标签: es6-module-loader

我试图移植一些我编写的使用systemjs + Babel的ES6代码.

移植大部分代码时没有任何问题.

但是,我有一些代码需要动态加载ES6模块,如下所示:

function load(src) {
    System.import(src).then(function() {});
}

src是一个外部ES6模块,它也可能有依赖项(静态导入).

我怎么能把这个代码移植到Webpack？如果我尝试使用require语句,我会收到一个警告,根据Webpack文档,这似乎是正常的.

我是TypeScript的新手,我希望我能够导入我的TS文件,而无需指定它们是TS文件.

我要做

import {sealed} from "./decorators/decorators.ts";

而不是我想要的是正确的方式

import {sealed} from "./decorators/decorators";

这会导致错误,表明它只查找以.js或.jsx结尾的文件

我的tsconfig.json看起来像这样

{
"compileOnSave": true,
"compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "allowJs": true,
    "target": "es6",
    "removeComments": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
},
"exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
]

}

我想知道在另一个模块中导入模块的函数/类的最佳实践是什么,模块本身需要在导入到另一个模块之前调用/初始化它自己的函数/类？我不知道我是否可以清楚地问我的问题!让我们把它放在一个例子中.

这是我的模块:

// myModule.js
class MyModule {
  constructor() {
    // do sth
  }
}

let myModule = new MyModule();

这就是我喜欢在另一个模块中导入它的方式:

import MyModule from './myModule';

这实际上工作正常!但正如你所看到的,在myModule.js文件我没有export default我的MyModule班,因为这并不是说是在发生的唯一myModule.js文件!我也在定义它之后初始化类...(我知道即使我已经设置了我的类,因为export default初始化仍然可以正常工作,而模块是在其他地方导入的......)

因此,如果没有在我们的模块中设置任何导出内容,或者将类设置为export default,那么当模块被导入其他地方时一切正常......到目前为止一切都很好!但是如果有的话,我正在寻找最佳实践!

以下是关于此类案例的问题:

1. 导入没有任何东西用于导出的模块是否可以？
2. 我们应该将类设置为export default,尽管我们在模块中的类之外做了一些更多的工作(定义类之后发生的初始化工作)？
3. 或者也许在另一个函数中执行初始化作业然后导出类,函数,然后调用函数在导入的模块中执行初始化作业是否合适？

非常感谢大家!我非常感谢有关这方面的任何帮助:)

我的项目对大多数文件使用Webpack和es6模块。这些文件在浏览器中运行，并由Webpack捆绑。

在节点中运行的文件很少。他们没有被Webpack所感动，我看不到任何将它们包含在webpack中的好处。他们不支持，import因为尚未在节点（或V8）中实现。

现在进入.eslintrc，如果设置parserOptions.sourceType为script，它将在浏览器文件中出现错误（“ import并且export仅在模块中允许！”）。如果parserOptions.sourceType设置为module，它将在节点文件中出错。

那么如何做每个文件parserOptions？/* eslint-env xxx */在这种情况下不起作用

编辑

我可能可以使用特定于目录的.eslintrc，但这意味着为了更改一个选项而复制所有其他配置。还有更好的选择吗？

我真的希望我能够使用 webpack 加载包含使用raw-loader. 不幸的是，它-在第一行的's处失败 ：-----BEGIN CERTIFICATE-----。
作为测试，我删除了第一个-----，然后它在“”（空格）字符处失败。

似乎比使用fs和回调更简单的解决方案。

为了澄清，我希望能够做到这一点：

import caCert from './cacert';

我--module system在一个非常大的项目中使用TypeScript和(SystemJS).SystemJS支持循环依赖,并且大多数时候它工作正常.但是,当涉及到TypeScript继承时,事情就会开始破坏.

例如,如果a class A依赖于class B,并且class B 继承自class A,则class A首先加载:

1. 它将暂停class A's解决并尝试加载class B依赖项
2. class B因为class A被触及了,所以会认为它的依赖关系得到了解决.
3. class B's继承将无法解决,因为class A仍未定义.

我可以在网上找到与模块加载器的循环依赖关系的大多数"解决方案":

• 将您的设计/组合类更改为单个模块
• CommonJS和非TypeScript特定的解决方法

我觉得循环设计有合理的理由,并且将类合并到巨型文件中并不总是可取的,所以请考虑这些变通方法是我要问的问题.

有没有解决实际问题的方法？

用户.js

class User {

  constructor() {
    this.fisrtName
    this.lastName
  }

  get fullName() {
    `${this.firtName} ${this.lastName}`
  }

}

export default User

测试.js

import React from 'react'
import {User} from './User'

class Test extends React.Component {

  testClick(e) {
    const user = new User() //error! because User is undefined.
  }

  render() {
    return (
      <button onClick={this.testClick.bind(this)}>test</button>
    )
  }

}

export default Test

我正在我的 ES6 javascript 模块中尝试这个：

import externalutil from 'https://externalutil.com/js/externalutil.js';

但它因以下转换错误而失败：

Module not found: 'https://externalutil.com/js/externalutil.js' 

文件externalutil.js 是一个老式的javascript 库，不导出任何内容。

任何帮助将不胜感激。

我是 Node js 的新手，遇到了一些问题。以前我使用 node Js v13.8 来运行我的 express 应用程序，它运行良好。我使用的是具有 JS 扩展文件的 es6 语法和类型模块。但是，当我升级到 Node 14.1.0 时。它显示以下错误（与 13.9 相同的错误）。

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for D:\Projects\matri-site\bin\www。

这是我的错误片段

当我再次降级到 Node 13.8 时，它工作正常。

这是我的 package.json 文件：

{
  "name": "matri-site",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "buffer": "^5.5.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "4.16.1",
    "handlebars": "^4.7.6",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.8.9",
    "morgan": "~1.9.1",
    "nodemailer": "^6.4.2",
    "redis": "^3.0.2",
    "validator": …

我正在尝试重新组织 TypeScript React 项目的导入/导出语句，使它们更短、更清晰，基本上是通过index.ts在每个功能特定文件夹中定义文件来导出该功能的资源（接口/类型/功能等）的方法。这种组织“进口”博客的更智能方式解释了几乎相同的想法。

但在更改后，笑话执行突然中断并出现以下堆栈跟踪。出于保密目的，所涉及的实体已被欺骗。

Test suite failed to run

    TypeError: Cannot read property 'FooBarEnum' of undefined



      at Object.FooBarEnum (src/features/Zoo/index.ts:93:23)
      at Object.<anonymous> (src/features/CarPark/CarParkManager.ts:18:4)
      at Object.<anonymous> (src/features/CarPark/index.ts:1:1)
      at Object.<anonymous> (src/features/Zoo/ZooManager.ts:1:1)
      at Object.<anonymous> (src/features/Zoo/index.ts:14:1)
      at Object.<anonymous> (src/features/Rabbit/Rabbit.ts:4:1)
      at Object.<anonymous> (test/features/Rabbit/Rabbit.test.ts:2:1)

基本上，在常量文件中定义了一个根本无法读取的枚举。

我很确定我的笑话设置是正确的，因为它在此之前已成功执行。我用babel-jestand@babel/preset-typescript来编译。

如果有人能给我指出调试路径，我将不胜感激，因为堆栈跟踪并不能真正说明太多信息。