小编gra*_*dev的帖子

我一直在使用 Next.js 新的优化图像组件，我想我了解它在使用不同布局选项（intrinsic、fixed和responsive）时的工作原理fill。但是有一个配置选项imageSizes我不明白。

从文档中，我可以看出有以下两个默认配置选项：

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

如果我理解正确的话，devicesSizes它是一系列断点；当对图像使用fill或responsive布局时，Nextjs 会创建宽度与断点相对应的图像的多个版本，并在srcset为该图像自动生成的 中引用这些版本。我们还可以通过 prop 告诉浏览器如何使用这些版本sizes。例如：

<Image 
    image={ image }
    layout="responsive" 
    sizes="(max-width: 500px) 100vw, 25vw" 
    width={1200}
    height={960}
/>

对于imageSizes，文档说：

您可以使用 imageSizes 属性指定图像宽度列表。这些宽度应该不同于（通常小于）deviceSizes 中定义的宽度，因为数组将被连接。当下一个/图像组件使用layout =“fixed”或layout =“intrinsic”时，将使用这些宽度。

这是否意味着，当使用fixedorintrinsic布局时，Nextjs …

我一直在学习关于如何使用 React 和 Redux 构建服务器端渲染应用程序的很棒的课程，但我现在处于课程没有涵盖的情况，我自己也无法弄清楚。

请考虑以下组件（它非常基本，除了底部的导出部分）：

class HomePage extends React.Component {

    componentDidMount() {       
        this.props.fetchHomePageData();
    }   

    handleLoadMoreClick() {
        this.props.fetchNextHomePagePosts();
    }   

    render() {

        const posts = this.props.posts.homepagePosts; 
        const featuredProject = this.props.posts.featuredProject; 
        const featuredNews = this.props.posts.featuredNews; 
        const banner = this.props.posts.banner; 
        const data = ( posts && featuredProject && featuredNews && banner ); 

        if( data == undefined ) {
            return <Loading />; 
        }

        return(
            <div>
                <FeaturedProject featuredProject={ featuredProject } />
                <FeaturedNews featuredNews={ featuredNews } />
                <Banner banner={ banner } />                
                <PostsList posts={ posts } …

我创建这个“问题”是为了记录我如何在本地设置 SSL，以防我将来需要再次执行此操作。我想我会在这里记录下来，希望这对其他人也有帮助，因为这是一个棘手的过程。

我正在使用 High Sierra、MAMP v 4.2.1 和 Chrome v 71 的 Mac

好吧，让我们滚吧。

我有三个脚本:

<script type="text/javascript" src="main.min.js"></script>
<script type="text/javascript" src="script-A.js"></script>
<script type="text/javascript" src="script-B.js"></script>

main.min.js是我用Webpack创建的文件.这个文件包含了我的项目所需的所有脚本,包括我作为NPM包安装的jQuery.

script-A.js并且script-B.js是脚本,遗憾的是我不能包含在我的主Webpack文件中,因此我需要单独加载它们.这些脚本需要jQuery作为依赖项; 但即使包含jQuery main.min.js,我jQuery is not defined在调用时也会收到错误.

顺便说一句,在我的Webpack文件中,我已经有了这些代码行,这让我在通过Webpack处理的任何脚本中使用jQuery,但它似乎对其他脚本没有任何影响:

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    "window.jQuery": 'jquery'
})

我该如何修复错误？理想情况下,我需要一个解决方案,我不需要触摸script-A.js,script-B.js因为它们属于插件.

CONSOLE SNIPPET

Uncaught ReferenceError: jQuery is not defined
    at script-A.js?ver=2.9.6:1
Uncaught ReferenceError: jQuery is not defined
    at script-B.js:617
    at script-B.js:620

PACKAJGE.JSON

{
  "name": "mysite",
  "version": "1.0.0",
  "description": "mysite",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" …

我已经查看了几个关于在 forEach 循环中使用 async/await 的问题，但似乎没有任何内容涵盖我的用户案例......我怎样才能让下面的代码工作？现在我收到以下错误：

await 是一个保留字

这是代码：

export const fetchUserBookmarks = ( bookmarksIDs ) => async ( dispatch, getState, api ) => {

    dispatch({
        type: 'IS_FETCHING_BOOKMARKS'
    });

    try {

        bookmarks = [];

        bookmarksIDs.forEach( bookmarkID => {
            const bookmark = await api.get( selectedPostByIdEP + bookmarkID ); 
            bookmarks.push( bookmark ); 
        }); 

        dispatch({
            type: 'HAS_FETCHED_BOOKMARKS', 
            payload: bookmarks
        });

    } catch( error ) {

        dispatch({
            type: 'FAILED_FETCHING_BOOKMARKS', 
            payload: error
        });

    }

}