为什么我的ES6根据导入范围具有不同的导出(exports || exports.default +命名)?

时间:2019-02-07 09:39:46

标签: javascript node.js ecmascript-6 es-module

我在yargs脚本中有这个:

  const pkg = require(join(argv.path, 'package.json'));
  const exported = require(join(argv.path, pkg.main));
  console.log(exported);

如果我尝试在yargs脚本包pkg.main中阅读此资源,则:

import SiteService, { SiteFunction } from 'site-service';

export const siteService = new SiteService('management', {
  id: 1000,
  othersIds: 1000,
});

export const siteFunction = new SiteFunction(siteService, {
  id: 1000,
  othersIds: 1000,
});

export default siteService;

导出的值为:

{ siteService:
   SiteService {
     name: 'management',
     config: { id: 1000, othersIds: 1000 },
     siteFunctionList: [] },
  siteFunction:
   SiteFunction {
     siteService:
      SiteService {
        name: 'management',
        config: [Object],
        siteFunctionList: [] },
     config: { id: 1000, othersIds: 1000 } },
  default:
   SiteService {
     name: 'management',
     config: { id: 1000, othersIds: 1000 },
     siteFunctionList: [] } }

如果我阅读了与此内容不同的模块的pkg.main,则:

import React from 'react';
import Resource from 'ra-core/lib/Resource';
import Route from 'react-router-dom/Route';
import SiteService, { SiteFunction } from 'site-service';
const siteService = new SiteService('management', {
  id: 1000,
  otherIds: [1, 2],
});

import {
  UsersList,
  UsersCreate,
  UsersEdit,
  UsersShow,
} from './resources/users';

export const siteFunction = new SiteFunction(siteService, ({ pages, roles, permissions }) => [
  <Resource
    name="users"
    list={UsersList}
    edit={UsersEdit}
    create={UsersCreate}
    show={UsersShow}
  />,
], ({ pages, roles }) => [
], ({ pages, roles }) => [
  {
    name: 'management',
    redirect: true,
    from: '/management',
    to: '/',
    description: 'management',
  },
]);


export default siteFunction;

我有以下输出

SiteFunction {
  siteService:
   SiteService {
     name: 'management',
     config: { id: 1000, otherIds: [Array] },
     siteFunctionList: [] },
  config: [Function] }

babel.config.js中的两个项目babel配置:

{
  only: [
    'src',
    'styleguide',
  ],
  comments: false,
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    'babel-plugin-array-includes',
    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-async-to-generator',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-proposal-json-strings',
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
  ],
  env: {
    production: {
      plugins: [
        'babel-plugin-add-module-exports',
        '@babel/plugin-transform-modules-commonjs',
      ],
    },
    test: {
      plugins: [
        '@babel/plugin-transform-modules-commonjs',
        'babel-plugin-dynamic-import-node',
      ],
    },
  },
}

在两种情况下,导入的pkg.main都是ES6语法,而运行的yargs脚本是ES5编译文件。

  1. 我认为这不好,我正确吗?
  2. 该错误发生在哪里?两个项目都具有相同的babel配置。
  3. 在我的脚本中,我是否应该假定两种情况都可能发生并且应该同时支持这两种情况?

0 个答案:

没有答案