标签: es6-module-loader

我使用ES6,Babel和webpack堆栈.

我已经安装了npm的highcharts(我更喜欢使用官方的highcharts npm repo):

npm install highcharts-release --save

但是,常规导入(ES6)不能按预期工作:

import highcharts from 'highcharts';

如何通过webpack导入导入Highcharts？你可以发布一个webpack.config.js示例(或其他方式配置插件)？

谢谢.

编辑

错误是:

Uncaught Error: Cannot find module "highcharts" webpackMissingModule @ review-chart.js:2(anonymous function) ....

我似乎无法弄清楚如何在本地文件的反应应用程序中呈现html5视频.从字面上看,我能够让这个工作的唯一方法就是这样:

<video src="http://www.w3schools.com/html/movie.mp4" controls />

这是我尝试过的

1.直接包括路径

<video src={require('path/to/file.mp4')} controls />

返回错误

Module parse failed: /path/to/file.mp4 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.

2.将这些加载器一次添加到webpack配置中

{
  test: /\.(mp4)$/,
  loader: 'file'
  // loader: 'url-loader'
  // loader: 'url-loader?limit=100000'
  // loader: 'file-loader'
  // loader: 'file-loader?name=videos/[name].[ext]'
},

这会在浏览器中吐出以下错误

GET http://localhost:3000/530c2bf99dad0f857d46940b62b84946.mp4 404 (Not Found)

3.我尝试添加一个直接链接到文件

<video src={require('http://localhost:3000/path/to/file.mp4')} controls />

但仍然是错误:

Module not found: Error: Cannot resolve module 'http://localhost:3000/path/to/file.mp4' in path/to/file.mp4

4.我尝试添加了MP4扩展在我的WebPack配置这样的人做

{ …

当我尝试简化导入时,我得到一个webpack TypeError.以下代码无任何问题.在这里,我将导入一个名为smartFormfrom 的React高阶组件(HOC)core/components/form/index.js.

core/components/form/index.js(命名导出smartForm)

export smartForm from './smart-form';

login-form.jsx(进口和使用smartForm)

import { smartForm } from 'core/components/form';
class LoginForm extends React.Component {
    ...
}
export default smartForm(LoginForm);

但是,我想简化导入到just import { smartForm } from 'core'.所以,我再出口smart-form的core/index.js和进口它core.请参阅以下代码:

core/index.js(命名导出smartForm)

export { smartForm } from './components/form';
// export smartForm from './components/form';  <--- Also tried this

login-form.jsx(进口和使用smartForm)

import { smartForm } from 'core';
class LoginForm …

我对这些语句中的模块说明符引用的内容感到困惑:

export {bar} from "foo";

import {bar} from "foo";

什么"foo"指的是？它不能是一个文件,因为它会是这样的"./foo".如果它不是文件,我认为它是一个ID.如何定义ID？

我正在从js文件导出,但导入将是type="module"firefox浏览器中的内联html脚本()的一部分.

浏览器版本(和浏览器设置)已经过验证,可与es6模块配合使用.

提前致谢.

在ES2015中,可以将整个模块导入为其属性为模块导出的对象:

import * as name from 'module';

我发现这对于命名空间非常有用,并且一直使用它.

也可以重新导出其他模块的导出:

export { name } from 'module'; // selectively
export * from 'other-module'; // indiscriminately

现在我正在尝试用这种风格编写一个带有命名空间的库.在顶级模块中收集所有内容的直观方式如下:

export * as name from 'module';

但这似乎不起作用; Babel和Rollup都拒绝了它.

我可以将模块作为对象导入,通过迭代其键来创建克隆,然后导出它,但它只是一个普通的旧动态对象,所以我将失去Rollup提供的巨大优势.

那么,使用声明性模块语法真的没办法做到这一点吗？在我看来,没有任何借口.

我想知道如果我使用ES6导入/导出与babel,我怎么能在Jasmine上监视/存根函数？

import MobileDetect from 'mobile-detect';
it('should spy MobileDetect', () => {
    MobileDetect = jasmine.createSpy('MobileDetect');
});`

第一个问题是我无法重写只读模块

模块构建失败: SyntaxError: /Users/oleg/projects/rp/popup/lib/spec/popup.spec.js: "MobileDetect" is read-only

it('should spy MobileDetect', () => {
    console.log(MobileDetect.prototype.constructor === MobileDetect); //true
    spyOn( MobileDetect.prototype, 'constructor' );
    console.log(MobileDetect.prototype.constructor === MobileDetect); //false
});`

我尝试过这种方法,但它也不起作用...... MobileDetect.prototype.constructor发誓,但MobileDetect不直接.

你怎么看待这个问题？

我一直在思考这个问题很多天,我决定问专家.

浏览器如何处理新的导入/导出语法？我的意思是:模块是否会异步加载？仅引用我的主文件或条目文件和浏览器将延迟加载requiere模块.

也许我错过了或误解了这个新架构的一些东西？

非常感谢你!

问候.

假设我有一个像这样的简单类fileA.js:

class foo {
    constructor(x) {
        this.name = x
    }

    fooMethod(x) {
        return x + 'hello';
    }
}

我想导入和使用fooMethod在fileB.js这样的:

import { fooMethod } from './fileA';

class bar() {
    ...
    barMethod(x) {
        return fooMethod(x);
    }
}

我怎么写exportin fileA来实现这个？

我使用webpack + es6来构建我的文件.我在Math.js中导出模块,然后在Main.js中导入.

在后者中,我使用模块进行计算,然后在调试器中设置停止.前者工作但当我尝试在控制台中使用它时没有定义.

范围是相同的 - 为什么模块不在控制台中定义？

// Math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// Main.js
import * as mathTest from "./Math.js";
console.log("2? = " + mathTest.sum(mathTest.pi, mathTest.pi));
debugger

// Output
// The statement from the file writes properly but the debugger fails (but <this> is the same)

在Node v8.5.0中,将用ES6编写的模块发布到NPMJS是一个简单的过程:使用像Babel这样的工具来转换ES6代码,并将生成的lib目录发布到NPMJS ,而GitHub repo包含这些src文件.

在v8.5.0中,Node通过标志发布了对本机模块(export/ import)的实验性支持--experimental-modules.现在可以将纯ES6模块发布到NPMJS,并且只要涉及的文件具有.mjs扩展名,就可以使用它们而不进行任何转换.

如何我发布一个ES6模块(.mjs),因此,它也可以与旧版本的节点,不支持原生的ES模块一起使用？