标签: es6-module-loader

我很难尝试导入lodash模块.我使用npm + gulp设置我的项目,并继续击中同一面墙.我尝试过常规的lodash,还有lodash-es.

lodash npm包:(包根文件夹中有一个index.js文件)

import * as _ from 'lodash';    

结果是:

error TS2307: Cannot find module 'lodash'.

lodash-es npm包:(在lodash.js中有一个defaut导出我的包根文件夹)

import * as _ from 'lodash-es/lodash';

结果是:

error TS2307: Cannot find module 'lodash-es'.   

gulp任务和webstorm都报告了同样的问题.

有趣的是,这不会返回错误:

import 'lodash-es/lodash';

......但当然没有"_"......

我的tsconfig.json文件:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

我的gulpfile.js:

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    tsPath = …

我试图使用Webpack与Babel编译ES6资产,但我收到以下错误消息:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

这是我的Webpack配置的样子:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

以下是使用Webpack的中间件步骤:

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express …

我使用webpack路径别名来加载ES6模块.

例如,如果我定义别名utils而不是类似的东西
import Foo from "../../../utils/foo",我可以这样做
import Foo from "utils/foo"

问题是,一旦我开始使用别名,WebStorm就会失去对导入的跟踪,并且我会留下警告并且没有自动完成.

有没有办法指示WebStorm使用这些别名？

我目前正在使用MEAN Stack编写Web应用程序,并尝试在ECMAScript 6 JavaScript中编写代码; 但是,在使用导入和导出语法时,我在Chrome和Firefox中都出现错误.目前是否有任何浏览器完全支持ECMAScript 6？

请注意:我不是在询问浏览器何时支持ECMAScript 6.我问的是哪些浏览器支持ECMAScript 6导入和导出语法.请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox

编辑:有关更多背景,请参阅ES讨论的讨论.

我有三个模块A,B和C.A并B导入从模块的默认出口C和模块C导入的默认从两个A和B.但是,模块C不依赖于从模块评估期间A和B模块评估期间导入的值,仅在运行时在评估所有三个模块之后的某个时间点.模块A和B 不依赖于进口值C的模块评估期间.

代码看起来像这样:

// --- Module A

import C from 'C'

class A extends C {
    // ...
}

export {A as default}

.

// --- Module B

import C from 'C'

class B extends C {
    // ...
}

export {B as default}

.

// --- …

我有这种情况,我试图导入一个现有的库,我将调用troublesome(使用Webpack/Babel FWIW),它有一个全局引用jQuery,我试图使用模块语法解决它.

我已成功将jquery导入模块的"本地"范围,通过:

import jQuery from 'jquery'

所以我试过了:

import jQuery from 'jquery'    
import 'troublesome'

但也许并不奇怪,我得到的东西就像jQuery is not a function踢回来一样troublesome.js

我也试过这个:

System.import('jquery')
.then(jQuery => {
    window.jQuery = jQuery
})
import 'troublesome'

但是,事实证明这System.import是所谓的"模块加载器"规范的一部分,该规范是从es6/2015规范中提取的,所以它不是由Babel提供的.有一个poly-fill,但Webpack无法管理通过调用完成的动态导入System.import.

但是......如果我在index.html中调出脚本文件,就像这样:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>

jQuery解决了引用troublesome.js并且事情很好,但我宁愿避免脚本标记路由,因为webpack不管理这些.

任何人都可以推荐一个体面的策略来处理这样的场景吗？

更新

在@ TN1ck的一些指导下,我最终能够使用imports-loader识别一个以Webpack为中心的解决方案

此解决方案的配置如下所示:

  //...
  module: {
    loaders: [
      //...
      {
        test: require.resolve('troublesome'),
        loader: "imports?jQuery=jquery,$=jquery"
      }
    ]
  }

是否可以从ES6中的外部URL导入javascript模块？

我试过(使用babel-node):

import mymodule from 'http://...mysite.../myscript.js';
// Error: Cannot find module 'http://...mysite.../myscript.js'

我正在使用vue-loader(http://vuejs.github.io/vue-loader/start/spec.html)来构建我的*.vue单文件组件,但是我在扩展单文件组件时遇到了问题从另一个.

如果一个组件遵循规范export default { [component "Foo" definition] },我认为这只是导入此组件的问题(就像我对任何子组件一样)然后export default Foo.extend({ [extended component definition] })

不幸的是,这不起作用.有人可以提供建议吗？

我试过在互联网上搜索导入模块的执行顺序.例如,假设我有以下代码:

import "one"
import "two"
console.log("three");

其中one.js和two.js定义如下:

// one.js
console.log("one");

// two.js
console.log("two");

控制台输出是否保证为:

one
two
three

还是未定义？

使用ES2015语法,我们有了新的导入语法,我一直在试图弄清楚如何将从一个文件导出的所有内容导入另一个文件,而不必将其包装在一个对象中,即.就好像它们是在同一个文件中定义的一样.

所以,基本上,这个:

// constants.js

const MYAPP_BAR = 'bar'
const MYAPP_FOO = 'foo'

// reducers.js

import * from './constants'

console.log(MYAPP_FOO)

这不起作用,至少根据我的Babel/Webpack设置,这种语法无效.

备择方案

这样可行(但如果你需要输入的东西多于一些东西,那就很长而烦人):

// reducers.js

import { MYAPP_BAR, MYAPP_FOO } from './constants'

console.log(MYAPP_FOO)

就像这样(但它将对象包装在一个对象中):

// reducers.js

import * as consts from './constants'

console.log(consts.MYAPP_FOO)

是否有第一个变体的语法,或者您必须按名称导入每个东西,还是使用包装器对象？