相关疑难解决方法(0)

我正在使用ECMAScript6模块.从以下选项中导出/导入模块中的多个方法的正确方法是什么？

单类静态方法:

//------ myClass.js ------

export default class myClass {

  static myMethod1() {
    console.log('foo'); 
  }

  static myMethod2(args...) {
    console.log('bar'); 
  }  

}

//------ app.js ------

import myClass from 'myClass';
myClass.myMethod1();    //foo

多种导出方法:

//------ myMethods.js ------

export function myMethod1() {
    console.log('foo');
}

export function myMethod2() {
    console.log('bar');
}

//------ app.js ------
import {myMethod1, myMethod2} from 'myMethods';
myMethod1()    //foo;


//OR
import * as myMethods from 'myMethods';
myMethods.myMethod1()    //foo;

1)导出:一类只是静态方法感觉有点"代码味道",但同样单独导出所有内容确实感觉有点冗长.它只是开发人员偏好还是存在性能影响？

2)导入:'*as'语法是我首选的方法,因为它允许您使用点符号(引用模块和方法)帮助代码可读性.当我可能只使用其中一种方法时,这是否有性能影响？

只是想知道哪一个是使用导入的最佳方式:

import * as Foo from './foo';

VS:

import { bar, bar2, bar3 } from './foo';

例如,在效率方面,我使用webpack来捆绑所有JavaScript文件.即使我没有在主代码中使用它们,第一个实际上会导入所有内容吗？

我能找到的一些参考文献是:

在Airbnb风格指南中,他们建议不要使用通配符,因此总会有默认的导入对象,而这一点.

我正在使用使用 Lodash 的 webpack 4/React 应用程序学习摇树。

起初，我的 Lodash 用法是这样的：

import * as _ from "lodash";
_.random(...

我很快通过 BundleAnalyzerPlugin 了解到，整个 Lodash 都包含在开发和生产版本中（527MB）。

经过google搜索周围，我意识到，我需要使用特定的语法：

import random from "lodash/random";
random(...

现在，只有random它的依赖项正确地包含在包中，但我仍然有点困惑。

如果我需要在我的import语句中明确指定函数，那么 tree-shaking 实际扮演了什么角色？在比较开发和生产模式构建时，BundleAnalyzerPlugin 没有显示有效负载大小的差异（这两者都是正确的小尺寸，但我认为摇树仅发生在生产构建中？）。

我的印象是 TreeShaking 会执行某种静态代码分析，以确定实际使用了哪些代码部分（可能基于功能？）并剪掉未使用的位。

为什么我们不能总是只*在我们的中使用import并依靠 TreeShaking 来找出实际包含在包中的内容？

如果有帮助，这是我的webpack.config.js：

const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  entry: {
    app: ["babel-polyfill", "./src/index.js"]
  },
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false
    })
  ],
  devtool: "source-map", …

假设我有一个foo这样的模块:

export const f = x => x + 1;

export const g = x => x * 2;

我可以像这样使用这个模块:

import { f, g } from 'foo';

console.log(f(g(2)));

或者像这样:

import * as foo from 'foo';

console.log(foo.f(foo.g(2)));

我更喜欢第二种方式,因为它可以防止模块之间的名称冲突.

但是,import *效率较低？它是否会阻止捆绑包(例如Rollup和Webpack)发现未使用的导入并将其删除？

原始问题：JavaScript - 使用命名空间导入会对模块的 treeshake 能力产生影响吗？

假设我们使用ES6模块系统。根据文档，当我们使用 * 作为别名导入时，我们将从文件中获取所有导出并将它们包含在别名名称的对象内。

我想知道这是否对导入模块的树可摇动性有任何影响？

如果是这样，命名导入和默认导入在这方面是否更好？

我试图使用Ramda.js如下:

/// <reference path="../../../node_modules/@types/ramda/index.d.ts" />
module App {
    var settab = R.once((element) => current(element));  
    function current(li: any) {
        // ...
    }    
}

我收到错误,找不到名字'R'

对于ramda/index.d.ts文件,声明(省略详细信息)如下:

declare var R: R.Static;    
declare namespace R {
    type Ord = number | string | boolean;
    interface Static {
        // .........
    }
}

export = R;