小编fel*_*osh的帖子

我正在开发一个Webpack插件,它基本上css在块中寻找资源,当它找到这样的资产时,在它上面应用一些postCSS返回2个输出的插件,应该继续使用它来提取Extract-Text-Plugin,其他输出应该成为一个新的模块内部块,它注入到头部上运行.

我没有设法实现的唯一部分是在现有 Chunk 中创建新模块的部分.有一些指示/想法？

我设法创建了一个新的块,但没有webpack包装器,这意味着我无法支持HMR用于那块css并且懒得加载它.

class ExtractTPAStylePlugin {
  constructor(options) {
    this._options = Object.assign({
      pattern: [
        /"\w+\([^\)]+\)"/
      ]
    }, options);
  }

  extract(compilation, chunks) {
    const promises = [];

    chunks.forEach((chunk) => {
      promises.push(
        chunk.files
          .filter(fileName => fileName.endsWith('.css'))
          .map(file => postcss([extractStyles(this._options)])
            .process(compilation.assets[file].source(), {from: file, to: file})
            .then((result) => {
              compilation.assets[file] = new RawSource(result.css);

              const filename = file.replace('.css', fileSuffix);
              const newChunk = new Chunk(filename);
              newChunk.files = [filename];
              newChunk.ids = …

我正在使用webpack 4捆绑应用程序资源。

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types":  ["node"], 
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
    "compileOnSave": true,
    "exclude": [
       "node_modules"    
    ]
}

webpack.config.js：

module.exports = require("./config/webpack.dev.js");

webpack.common.js：

//common webpack configuration
var webpack = require("webpack");
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
var helpers = require("./helpers.js");

module.exports = {
//the entry-point files that …

自JSDom的最新版本发布以来,我再也无法模拟localStorage了.

我尝试了以下方法:

1. Object.defineProperty(window, 'localStorage', {value: LocalStorageMock})
2. window.localStorage = LocalStorageMock;
3. jest.spyOn(window.localStorage, 'setItem')

任何这些方法对我都不起作用,我总是得到原始的localStorage.

我有一个 Nextjs 应用程序，它的页面分为 3 个区域，管理区域，前台区域，成员区域。

我想为node_modules属于同一区域的页面（它们被定义为 webpack 中的入口点）使用的所有包创建一个公共块。

比如这个是项目的文件夹结构，nextjs配置每个页面作为webpack的入口点。

pages/
  admin/
    page-1.jsx
    page-2.jsx
    page-3.jsx
    page-4.jsx
  front/
    page-a.jsx
    page-b.jsx
    page-c.jsx
  members/
    page-a1.jsx
    page-b2.jsx

我想创建admins-common块，将持有的所有通用node_module软件包page-1，page-2，page-3，page-4有共通之处。

如果同一个包被多个“组”（例如反应）使用，那么如果它是一个global-commons块，那就太好了。

希望这是有道理的，任何要点都会有所帮助。

我想测试页面在点击 div 后被重定向，但我不知道如何，这是我的代码。非常感谢

<div className="bellTest">
   <NextLink href="/notifications">
       <Bell />
   </NextLink>
 </div>

测试.tsx

jest.mock('next/link', () => {
     return ({ children }) => {
            return children;
     };
});

describe('Test of <HeaderContainer>', () => {
    test('Test the page redirect after click', async done => {
        const wrapper = mount( <HeaderComponent /> );
        await wrapper
            .find('.bellTest')
            .at(0)
            .simulate('click');
        // expect the page getting redirect
    });
});

我有一个富文本编辑器输入字段，我想用去抖组件包裹它。去抖输入组件如下所示：

import { useState, useCallback } from \'react\';\nimport debounce from \'lodash.debounce\';\n\nconst useDebounce = (callback, delay) => {\n  const debouncedFn = useCallback(\n    debounce((...args) => callback(...args), delay),\n    [delay] // will recreate if delay changes\n  );\n  return debouncedFn;\n};\n\nfunction DebouncedInput(props) {\n  const [value, setValue] = useState(props.value);\n  const debouncedSave = useDebounce((nextValue) => props.onChange(nextValue), props.delay);\n\n  const handleChange = (nextValue) => {\n    setValue(nextValue);\n    debouncedSave(nextValue);\n  };\n\n  return props.renderProps({ onChange: handleChange, value });\n}\n\nexport default DebouncedInput;\n

我使用DebouncedInput作为MediumEditor的包装组件：

<DebouncedInput\n  value={task.text}\n  onChange={(text) => onTextChange(text)}\n  delay={500}\n  renderProps={(props) …

我有一个 autHeader，我想将其添加到“服务”中，但出现了此错误：

Type '{ 'x-access-token': any; } | { 'x-access-token'?: undefined; }' is not assignable to 
type 'AxiosRequestHeaders | undefined'.
Type '{ 'x-access-token'?: undefined; }' is not assignable to type 'AxiosRequestHeaders'.
Property ''x-access-token'' is incompatible with index signature.
Type 'undefined' is not assignable to type 'string'.

我该如何解决这个问题？

添加“authheader”的最佳位置在哪里？

待办事项.service.ts：

import authHeader from './auth-header';

// create columns
async function createList(title: string) {
  const response = await axios.post(
    'http://ec2-18-132-52-86.eu-west-2.compute.amazonaws.com/api/v1/todo-list',
    { title: title },
    { headers: authHeader() }
  );
  return response;
}

auth-header.ts： …

我有一个用 Typescript 创建的插件，我需要在这个插件中激活 Tree-shaking 。有没有办法在没有 webpack 的情况下启用此功能？