在 Docker 环境中使用 Vite 构建器发布运行 Storybook

Question

我们有一个 docker 组合设置，可以在两个单独的容器中运行我们的 React 应用程序和 Storybook。

最近我们将构建器更改为 Vite，并将 Storybooks 构建器更新为新的 Vite 构建器插件。

启动 Storybook 时 Docker 我的所有组件都出现以下错误，其中包含 Storybook 文件

al-storybook-dev  | 12:55:19 AM [vite] Internal server error: Parse error @:8:132
al-storybook-dev  |   Plugin: storybook-vite-inject-export-order-plugin
al-storybook-dev  |   File: /home/node/app/src/v2.2/components/Card/Card.stories.js
al-storybook-dev  |       at parse (/home/node/app/node_modules/es-module-lexer/dist/lexer.cjs:1:402)
al-storybook-dev  |       at TransformContext.transform (/home/node/app/node_modules/storybook-builder-vite/inject-export-order-plugin.js:11:35)
al-storybook-dev  |       at Object.transform (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:50399:53)
al-storybook-dev  |       at async transformRequest (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:65167:29)
al-storybook-dev  |       at async viteTransformMiddleware (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:65295:32)

浏览器控制台为每个组件记录 404 错误 screenshot of browser console log

我们有 Storybook 目录设置，将 Storybook 分隔到项目根目录中它自己的目录中

|-- storybook
 |-- .storybook
 |-- package.json

我对 Docker 或 Vite 配置不是很熟悉，想知道是否有其他人遇到过这个问题，或者知道是什么导致了这个问题？

Storybook 配置（.storybook -> main.js）

module.exports = {
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
    core: {
        builder: "storybook-builder-vite",
    },
};

故事书package.json

{
    "name": "assetlogue-app-storybook",
    "version": "1.0.0",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook"
    },
    "dependencies": {
        "react": "^17.0.0",
        "react-dom": "^17.0.0"
    },
    "devDependencies": {
        "@babel/core": "^7.15.0",
        "@storybook/addon-actions": "^6.3.0",
        "@storybook/addon-essentials": "^6.3.0",
        "@storybook/addon-links": "^6.3.0",
        "@storybook/react": "^6.3.0",
        "@vitejs/plugin-react-refresh": "^1.3.1",
        "babel-loader": "^8.2.2",
        "sass": "^1.37.0",
        "storybook-builder-vite": "^0.0.12",
        "vite": "^2.4.4"
    }
}

Docker 撰写文件

version: "3.5"
services:
    storybook:
        container_name: al-storybook-dev
        image: node:14-alpine
        working_dir: /home/node/app
        volumes:
            - storybook_modules:/home/node/app/node_modules:rw
            - ../../storybook/package.json:/home/node/app/package.json:rw
            - ../../src/:/home/node/app/src:rw
            - ../../public/:/home/node/app/public:rw
            - ../../storybook/.storybook:/home/node/app/.storybook:rw
        command: sh -c "npm install && npm run storybook"
        ports:
            - "6006:6006"
        depends_on:
            - app
        networks:
            - dockernet
volumes:
    storybook_modules:

networks:
    dockernet:

Answer 1

原来从 Webpack 迁移到带有文件扩展名的 Vite 时有一个小 'gotcha'。

如果您的任何 React 组件不使用 .jsx 扩展名，Vite 将找不到它们。

在 Docker 环境中使用 Vite 构建器发布运行 Storybook

Issues running Storybook with Vite builder in Docker environment

docker

reactjs

docker-compose

storybook

vite

Storybook 配置（.storybook -> main.js）

故事书package.json

Docker 撰写文件

在 Docker 环境中使用 Vite 构建器发布 运行 Storybook

Issues running Storybook with Vite builder in Docker environment

docker

reactjs

docker-compose

storybook

vite

Storybook 配置（.storybook -> main.js）

故事书package.json

Docker 撰写文件

在 Docker 环境中使用 Vite 构建器发布运行 Storybook