标签: es6-module-loader

是否可以像ES#或其他编程语言一样将依赖注入ES2015模块？如果我导入一个模块,我会为它创建一个硬依赖项,并且以后不能在运行时更改它.例如,我有以下JavaScript代码:

import Animal from './dog';

class Person {
  feedAnimal() {
    new Animal().feed();
  }
}

我正在导入狗模块.但是,如果我想把它改成猫呢？目前我必须手动修改第1行,但在某些情况下我希望它可以从外部进行配置,以便在某些情况下应该有一只猫,在某些其他条件下它应该是猫.所有可以通过经典依赖注入完成的事情.

我知道有一些DI框架存在像散,电解质,电线等可惜大多需要一些特殊的语法,并没有对由ES2015模块.

我了解ES6模块规范,问题在于它的支持.AFAIK,没有本机实现此功能的浏览器(请参阅此处的浏览器兼容性 ).有几个问题:

• 显然,ES6模块是ES6功能.当我查看kangax兼容性表时,我根本没有看到这样的行(对于ES6模块),为什么会这样？这是ES6的一个功能...
• 因此,现在使用ES6的唯一方法是使用构建工具,例如babel,browserify或任何其他替代品,对吧？
• 当它们被本机支持时,如何从浏览器中调用异步AJAX来获取模块？

ES6 允许我们使用新的导入语法。使用它，我们可以将模块导入我们的代码或这些模块的一部分。使用示例包括：

// Import the default export from a module.
import React from 'react'; 

// Import named exports from a module.
import { Component, PropTypes } from 'react'; 

// Named import - grab everything from the module and assign it to "redux".
import * as Redux from 'react-redux'; 

但是，我们也有这个谜团：

import 'react';

看起来 ES6 支持裸 import，因为这是一个有效的 import 语句。但是，如果这样做了，似乎无法实际引用该模块。

我们将如何使用它，为什么？

我正在使用jwpalyer制作VideoPlayer反应组件,我正在使用webpack es6来加载模块webpack支持npm模块加载并且jwplayer没有npm

所以我试图使用es6 import包含jwplayer.js,但它给了我错误ReferenceError:window未定义

所以任何人都可以帮我正确设置webpack的jwplayer

  import React, { PropTypes, Component } from 'react';
  import $ from 'jquery';
  import Player from "./lib/jwplayer/jwplayer.js";
  import styles from './VideoPayer.css';
  import withStyles from '../../decorators/withStyles';
  import Link from '../Link';

  @withStyles(styles)
  class VideoPlayer extends Component {

    static propTypes = {
      className: PropTypes.string,
    };

    static defaultProps = {
      file: '',
      image: ''
    };

    constructor(props) {
      super(props);
      this.playerElement = document.getElementById('my-player');
    }


    componentDidMount() {
      if(this.props.file) {
        this.setupPlayer();
      }
    }

    componentDidUpdate() {
      if(this.props.file) {
        this.setupPlayer();
      }
    }

    componentWillUnmount() {
       Player().remove(this.playerElement);
    } …

我有一个只有几个月的项目,我决定在ES6中编写它以学习新系统.(我很喜欢).该项目是一个复杂的WebGL渲染器.

最初我只是在浏览器中使用es6(不使用模块功能),只是在我的HTML中使用了很多import语句(丑陋).随着课程数量的增加,这变得无法控制.

现在我第一次学习webpack和babel.我的目标是将所有模块以es5或es6格式组合在一起.

我使用webpack将我的代码转换为单个es5(CommonJS)模块.所有功能都保持不变.好极了!

但是,在某些情况下,性能已经大大降低.我的一些代码运行速度只有它已转换为es5的一半.(这违反了我在本页中看到的数据https://kpdecker.github.io/six-speed/).

我想使用Webpack测试而不转换es6 - > es5.基本上只是利用webpacks将我的模块捆绑到一个文件中的能力.

我对webpack完全不熟悉,而且我一直试图弄乱babel转换代码的方式,但无法弄清楚如何简单地禁用大多数转换.我唯一想要转变的是模块导入/导出.

任何人都可以帮我解决这个问题吗？

PS我认为我的项目指出es6在某些现实世界的用例中要比es5快得多,并且有助于证明我决定从一开始就使用es6.

假设我有一个我想要重新导出的模块:

//exportme.js
export default 'EXPORTME';
export const test = () => console.log('test function');

//reexport.js
export * from './exportme.js'

当我导入reexport.js时,exportme.js的默认值不可用.

//app.js
import reexport from './reexport.js'

console.log(reexport) //undefined

我必须使reexport.js成为以下工作.

export * from './exportme.js'
export default from './exportme.js'

有没有更简单的方法来实现这一点,还是可以将其合并为一个语句？

export default, * from './exportme.js' 不起作用.

我正在使用最新的babel transform-export-extensions

我有一个文件夹，里面有很多 JSON 文件：

-json
--file1.json
--anotherfile.json
  ...
--lastfile.json

如何从该文件夹中导入所有这些文件，而无需明确定义它们的名称？

假设，我应该使用这样的东西：

import * as jsonFiles from './json'

但它不起作用。

那么，我该怎么做呢？

重要说明：这不是 Node.js，我在客户端将它与 React 一起使用。

您应该根据我们使用的样式指南将angularjs模块包装在IIFE中

https://github.com/johnpapa/angular-styleguide/tree/master/a1#iife

我-dir.js

(function() {
    'use strict';

    angular
        .module('my.dir', [])
        .controller('MyDirController', MyDirController),
        .directive('my-dir', MyDirDirective);

    function MyDirController() {

    }

    function MyDirDirective() {
        return {
            restrict: 'E',
            controller: MyDirController
        }
    }
})();

app.js

(function() {
    'use strict';
    angular
        .module('app', ['my.dir'])
})();

但是我们现在正在使用webpack来捆绑es6模块.我们该如何使用这个IIFE export？我们不能这样做,export default angular.module('my-dir', [])因为出口必须是一个顶级命令.另外,我们应该返回一个模块名称的字符串？因此它可以作为app模块中的要求包含在内.什么是最佳做法？

这有效,但你必须重新输入模块名称,并且在IIFE之外导出似乎有点混乱(我认为必须如此)

(function() {
    angular.module('my.dir', [])
        .controller('MyDirController', MyDirController)
        .directive('my-dir', MyDirDirective);

    function MyDirDirective(appPath) {
        return {
            restrict: 'E',
            scope: {},
            bindToController: {},
            controllerAs: '$ctrl',
            template: '<div ng-bind="$ctrl.msg"></div>',
            controller: MyDirController
        };
    }

    function MyDirController() …

使用 es6 导入，您可以执行以下操作：

import { MyComponent } from "../path/to/components.js";

export default function () {
  return <MyComponent/>;
}

我也可以这样做React.lazy吗？

const { MyComponent } = lazy(() => import("../path/to/components.js"));

我收到以下错误，但我不确定它是否与此错误或我遇到的其他错误有关：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

在从 CommonJS ( ) 迁移.cjs到 ES Modules ( .mjs) 时，我遇到了将命名空间 CJS 导入到 MJS 的问题：

import mysqlPromise from "mysql2/promise";\n

返回错误：

\n

错误 [ERR_MODULE_NOT_FOUND]：找不到模块\n\'C:\\Users\\User\\IdeaProjects\\\xe2\x80\xa6\\node_modules\\mysql2\\promise\' 导入\n从\xe2\x80\ xa6

\n

我查了一下相关线程ES模块支持吗？Node 13，但没有看到明确的解决方案。

有没有办法将命名空间的 CJS 导入 ES Module/MJS？