标签: es6-module-loader

我遇到了这个在ExploringJS中没有得到很好解释的区别

合格和不合格的进口工作方式相同(它们都是间接的)

区别是什么,因此该陈述的含义是什么？

使用SystemJS,如何指定一个库依赖于另一个库？例如,Bootstrap JavaScript库依赖于jQuery.基于SytemJS文档,我假设我将使用System.config.meta属性指定此依赖项:

System.config({
    baseUrl: './scripts',
    defaultJSExtensions: true,
    map: {
        jquery: './lib/jquery-2.2.0.min.js',
        bootstrap: './lib/bootstrap.min.js'
    },
    meta: {
        bootstrap: {
            deps: ['jquery']
        }
    }
});
System.import('./scripts/app.js');

但这似乎没有效果.当我运行我的应用程序时,Bootstrap库会抛出一个Bootstrap's JavaScript requires jQuery错误 - 这意味着在jQuery之前加载了Bootstrap.

如何确保在Bootstrap之前始终加载jQuery？

我不确定我在这里缺少什么。我正在使用jspm和es6-module-loader进行项目。我有一个定义如下的模块：

import hooks from './hooks';
import api from './api';
import tools from './tools';

const StencilUtils = {
    hooks: hooks,
    api: api,
    tools: tools,
};

export {hooks, api, tools};
export default StencilUtils;

/* global define */
(function(root) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return (root.stencilUtils = StencilUtils);
        });
    } else if (typeof module === 'object' && module.exports) {
        module.exports = StencilUtils;
    } else {
        window.stencilUtils = StencilUtils;
    }
}(this));

我将此模块导入另一个文件，并像这样使用它：

import utils from 'bigcommerce/stencil-utils';

utils.hooks.on('cart-item-add', (event, …

我已经尝试过一路运行基于YouTube的示例模块 - 加载程序,但即使在跟随stackoverflow中关于此的所有链接之后,我也无法解决问题.请在下面找到我的项目的详细信息,

我的项目结构:

**package.json**
{
  "name": "react-tutorials",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.16.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.12.2"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.16.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": …

我们正在考虑将一些角度项目移到打字稿上,并在内部模块/命名空间方面遇到一些麻烦.

我们在github上发布了这个工作示例:https: //github.com/hikirsch/TypeScriptSystemJSAngularSampleApp

脚步:

npm install jspm -g
npm install
cd src/
jspm install
jspm install --dev
cd ..
gulp bundle
cd src/
python -m SimpleHTTPServer

这是应用程序的要点:index.ts

/// <reference path="../typings/tsd.d.ts" />
/// <reference path="../typings/typescriptApp.d.ts" />

import * as angular from 'angular';

import {ExampleCtrl} from './controllers/ExampleCtrl';
import {ExampleTwoCtrl} from './controllers/ExampleTwoCtrl';

export var app = angular.module("myApp", []);

app.controller("ExampleCtrl", ExampleCtrl);
app.controller("ExampleTwoCtrl", ExampleTwoCtrl);

ExampleCtrl.ts

/// <reference path="../../typings/tsd.d.ts" />
/// <reference path="../../typings/typescriptApp.d.ts" />


export class ExampleCtrl {
    public static $inject:Array<string> = [];

    constructor() …

是否有可能像下面的开关案例示例声明中那样捕获拼写错误？

首选方式是eslinter报告警告/错误.如果未定义,当前添加toString()到const可用于TypeError在运行时引发.

actionTypes.js

export const UPDATE_REQUEST = 'UPDATE_REQUEST';

reducer.js

import * as types from '../constants/actionTypes';

export default function pouchdbReducer(state = {}, action) {
  switch (action.type) {
    case types.UPDDATE_REQUEST:
      // there is a typo above and it evaluates to `undefined`
      // this code would never be reached - how to make it an error
      return Object.assign({}, state, {updated: true});
    default:
      return state;
  }
}

更新:

正如@ n​​ikc.org回答eslint-plugin-import with namespace选项可以用于linting这样的bug.

这是一个包含配置和演示的小型存储库:

https://github.com/bmihelac/test-js-import-undefined/tree/eslint-plugin-import

eslint配置的相关部分是:

"plugins": …

PropTypes我想知道在 ES6 中导入 React 的两种名为 import ( , )的方法中哪一种Component是最好的。

第一的

import React, {PropTypes, Component} from 'react';

这将节省大量输入，特别是在有大量道具需要验证的组件上。

第二

import React form 'react';

然后像React.Component我想使用它们时那样调用它们。

两种方法之间是否存在性能差异，或者我应该选择我更喜欢的风格？

我正在使用ESM进行模块加载，然后像这样运行它们...

// More info on why this is needed see (https://github.com/mochajs/mocha/issues/3006)
async function wire(){
    await import("./Sanity.spec.mjs"); 
    await import("./Other.spec.mjs");
    run();
}
wire();

然后我像这样运行这些测试nyc mocha --delay --exit ./test/suite.js。但是当我运行Istanbul时，似乎无法识别我的进口货，因此无法提供承保范围信息...

  3 passing (14ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|

我如何才能使Istanbul识别ESM加载的代码？

我的文件都是.mjs扩展名

我有 fizz_buzz.mjs和test/fizz_buzz.spec.mjs

test/fizz_buzz.spec.mjs用途

import { fizzBuzz } from '../fizz_buzz'

我跑npm test，我得到

> mocha test/**/*.spec.mjs                                                                                                                              

/home/durrantm/Dropbox/90_2019/work/code/js/mocha_chai_bdd_tdd_exercises/node_modules/yargs/yargs.js:1163                                               
      else throw err                                                                                                                                    
           ^                                                                                                                                            

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/durrantm/Dropbox/90_2019/work/code/js/mocha_chai_bdd_tdd_exercises/test/fizz_buzz.spec
.mjs                                                                                                                                                    
    at Object.Module._extensions..mjs (internal/modules/cjs/loader.js:1025:9)                                                                          
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)

fizz_buzz.mjs目前只有：

$ cat fizz_buzz.mjs 
export function fizzBuzz() {
  return true
}

仅供package .json参考用途

"scripts": {
  "test": "mocha test/**/*.spec.mjs"
},

万一这就是问题所在？

我也尝试$ mocha test/**/*.spec.mjs --experimental-modules过命令行但同样的错误

我遇到下面的代码片段，其中包含对类型引用的循环导入依赖。

// Foo.ts
import { Bar } from './Bar';
export interface Foo {
  isBarOK: (bar: Bar) => boolean;
}

// Bar.ts
import { Foo } form './Foo';
export class Bar {
  protected readonly foo: Foo;
}

这是一个简化版本，但它解释了我遇到的情况。tsc编译代码没有问题，但我收到了import/no-cycle ESLint 规则的警告。我们可以看到这一点Foo并Bar互相参考以进行打字。这是一个不好的做法吗？它意味着什么影响？