小编Ev *_*aus的帖子

如何使用`import()`块(Webpack 2.2)控制共享代码的分块

使用webpack版本2.2.0.

我有一个带有单个entry配置的单页应用程序:entry: { app: ['./js/main.js'] }.这是一个动态加载视图import('./js/views/1')以进行代码分割的应用程序.

我遇到的问题是,所产生的views/1,views/2等..这得到创建的文件有一吨他们的内部复制模块.文件及其内容如下所示:

  • 主要: ./js/main.js
    • 0: ./js/views/1.js
    • ./js/modules/a.js
    • ./js/modules/b.js
    • 1:./js/views/2.js
    • ./js/modules/b.js
    • ./js/modules/c.js

请注意这两个views/1.jsviews/2.js具有共享的完整副本modules/b.js模块.在我的情况下,我有几十个视图和更多的共享模块,所以重复是我的一个巨大的问题.这是`webpack-bundle-analyzer'的样子:

捆绑分析仪

我已经尝试添加CommonChunkPlugin帮助来解决这个问题,但它似乎根本不会影响动态导入.

我正在寻找的是一种让webpack自动将所有共享模块移动到单独文件中的方法.理想情况下,我希望webpack输出以下块:

  • 主要: ./js/main.js
    • 0: ./js/views/1.js
    • 1: ./js/views/2.js
    • 2: ./js/modules/a.js
    • 3: ./js/modules/b.js
    • 4: ./js/modules/c.js

所以每个模块实际上都是一个单独的块.这将是使用HTTP2加载它们的最佳方式.

以下是示例项目的代码:https://github.com/EvNaverniouk/webpack-code-splitting

我怎样才能做到这一点?

我相信这与此问题有关:https://github.com/webpack/webpack/issues/3981

webpack

8
推荐指数
1
解决办法
1257
查看次数

如何在两个文件中共享相同的类型定义

我无法弄清楚如何在两个文件中共享类型定义.考虑:

// /file_a.js

export const randomVariable: MySharedType = {thing: true};

// /file_b.js

export const anotherRandomVariable: MySharedType = {thing: false};
Run Code Online (Sandbox Code Playgroud)

两个文件都使用该MySharedType类型,因此我想将该类型声明移动到某些共享类型定义.

所以我为它创建了一个新目录,并在[libs]我的部分下指向它flowconfig.结果就是我有:

// in /flow/typeExtensions/SharedTypes.js

// @flow
export type MySharedType = {thing: boolean}
Run Code Online (Sandbox Code Playgroud)

但是,流程不想玩得好,仍然给我错误:

 2:     export const randomVariable: MySharedType = {thing: true}
                                     ^^^^^^^^^^^^ identifier `MySharedType`. Could not resolve name
Run Code Online (Sandbox Code Playgroud)

我找不到任何有关如何创建全局共享流类型定义的文档或示例.

这是一个小型回购,展示了这个问题:https://github.com/EvNaverniouk/shared-flow-types

请帮忙.

flowtype

4
推荐指数
1
解决办法
844
查看次数

当通过引用调用原型函数时,类失去"this"范围

任何人都可以向我解释为什么"b"返回undefined以及如何解决这个问题?当我通过引用调用原型函数时,为什么"this"范围会丢失?

MyClass = function(test) {
this.test = test;
}

MyClass.prototype.myfunc = function() {       
   return this.test;
}

var a = new MyClass('asd').myfunc();
var b = new MyClass('asd').myfunc;

// Returns "asd" correctly
console.log(a)

// Returns undefined??
console.log(b())
Run Code Online (Sandbox Code Playgroud)

===编辑/解决方案===

正如plalx所写,在我的情况下,正确的解决方案是使用.bind().所以结果如下:

MyClass = function(test) {
    this.test = test;
}

MyClass.prototype.myfunc = function() {       
   return this.test;
}

var a = new MyClass('asd').myfunc();
var b = new MyClass('asd'),
    bfunc = b.myfunc.bind(b)

// Returns "asd" correctly
console.log(a)

// Also returns "asd" correctly!
console.log(bfunc())
Run Code Online (Sandbox Code Playgroud)

javascript scope prototype reference function

2
推荐指数
1
解决办法
1492
查看次数

如何从配置文件目录加载CSS文件(如何从文件路径创建URI)

我的扩展程序已将CSS文件保存到用户的配置文件目录中.现在,我想将这个CSS文件加载到一个窗口中.

sheetheet/utils似乎有一个loadSheet(window,uri,type)方法(https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/stylesheet_utils)但我不能弄清楚如何将我的CSS文件路径转换为预期的URI对象.

我的代码是这样的:

const ssutils   = require("sdk/stylesheet/utils"),
      windows   = require("sdk/windows");

var path_to_file = "c:\users\myname\appdata\local\temp\tmppr9imy.mozrunner\myextension\mycssfile.css"

for (let wind of windows.browserWindows) {
    // What is the magic function I need to use?
    ssutils.loadSheet(wind, someMagicFunctionHere(path_to_file), "user");
}
Run Code Online (Sandbox Code Playgroud)

firefox-addon firefox-addon-sdk

2
推荐指数
1
解决办法
138
查看次数