不支持React

[cixing]

[eight04]

我看不出來這個錯誤和 rollup-plugin-external-globals 的關聯是什麼

[cixing]

我看不出來這個錯誤和 rollup-plugin-external-globals 的關聯是什麼

import { defineConfig } from 'vite';
import react from "@vitejs/plugin-react";
import { createHtmlPlugin } from 'vite-plugin-html';
import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath';
// import createExternal from 'vite-plugin-external';
// import externalGlobals from "rollup-plugin-external-globals";
import * as path from 'path';

let alias = {
  'api': path.resolve(__dirname, './src//api'),
  'common': path.resolve(__dirname, './src//common'),
  'hooks': path.resolve(__dirname, './src//hooks'),
  'images': path.resolve(__dirname, './src//images'),
  'pages': path.resolve(__dirname, './src//pages'),
  'scss': path.resolve(__dirname, './src//scss'),
  'slices': path.resolve(__dirname, './src//slices'),
  'util': path.resolve(__dirname, './src//util'),
  'constant': path.resolve(__dirname, './src//constant'),
  'store': path.resolve(__dirname, './src//store'),
  'ServerApi': path.resolve(__dirname, './src//ServerApi'),
  'layout': path.resolve(__dirname, './src//layout'),
  'Hooks': path.resolve(__dirname, './src//Hooks'),
  'utils': path.resolve(__dirname, './src//utils'),
  'commonTop': path.resolve(__dirname, '..//commonTop'),
  'react': "https://esm.sh/react@17",
  'react-dom': "https://esm.sh/react-dom@17",
}

export default defineConfig(({ command, mode }) => {
  if (mode === 'serve') {
    return {
      root: './', // index.html文件所在位置
      base: '/creative_market_admin/', // 
      resolve: {
        alias,
      },
      server: {
        hmr: {
          protocol: 'ws',
          host: '127.0.0.1'
        }
      },
      plugins:
        [
          createHtmlPlugin({
            entry: 'src/index.jsx',
            template: 'index.html',
            inject: {
              data: {
                injectScript: `<script type="module" src="./src/index.jsx"></script>`,
              },
              tags: [
                {
                  injectTo: 'body-prepend',
                  tag: 'div',
                  attrs: {
                    id: 'root',
                  },
                },
              ],
            },
          }),
          react(),
        ]
    }
  } else {
    // command === 'build'
    // build 独有配置
    return {
      root: './', // index.html文件所在位置
      base: process.env.cdnLatestUrl || './',
      resolve: {
        alias,
      },
      build: {
        rollupOptions: {
          external: ['react', 'react-dom'],
          plugins: [
            externalGlobals({
              react: 'React',
              'react-dom': 'ReactDOM',
            })
          ]
        }
      },
      plugins:
        [
          react(),
          createHtmlPlugin({
            entry: '/src/index.jsx',
            template: 'index.html',
            inject: {
              data: {
                injectScript: `<script type="module" src="./src/index.jsx"></script>`,
              },
              tags: [
                {
                  injectTo: 'body-prepend',
                  tag: 'div',
                  attrs: {
                    id: 'root',
                  },
                },
              ],
            },
          }),
          useDynamicPublicPath({
            dynamicImportHandler: process.env.cdnLatestUrl,
          }),
          // createExternal({
          //   externals: {
          //     react: 'React',
          //     'react-dom': 'ReactDom',
          //   }
          // })
          // importToCDN({
          //   modules:[
          //     {
          //       name:'react',
          //       var:'React',
          //       path:'https://unpkg.com/[email protected]/umd/react.production.min.js'
          //     },
          //     {
          //       name:'react-dom',
          //       var:'ReactDOM',
          //       path:'https://unpkg.com/[email protected]/umd/react-dom.production.min.js'
          //     },
          //   ]
          // })
        ]
    }
  }
})

[cixing]

我看不出來這個錯誤和 rollup-plugin-external-globals 的關聯是什麼

vite配置使用了一下这个插件 就报错了

[eight04]

1. 程式碼怪怪的，例如

     if (mode === 'serve') {
   

   這行是不是該改成

     if (command === 'serve') {
   

2. 交給 external-globals 處理的 package，不需要加入 rollupOptions.external 中。
3. 這錯誤表示產出的程式碼中包含類似下列的 import 語句︰

   import XXX from "react";
   

   建議去檢查這語句來自哪個檔案，並除錯為何 external globals 沒有處理該檔案。

[cixing]

1. 程式碼怪怪的，例如

     if (mode === 'serve') {
   

   這行是不是該改成

     if (command === 'serve') {
   

2. 交給 external-globals 處理的 package，不需要加入 rollupOptions.external 中。

3. 這錯誤表示產出的程式碼中包含類似下列的 import 語句︰

   import XXX from "react";
   

   建議去檢查這語句來自哪個檔案，並除錯為何 external globals 沒有處理該檔案。

1、确实是mode 2、 试了一下，打包没有排除掉react、react-dom。 还是打包进去了

[cixing]

1. 程式碼怪怪的，例如

     if (mode === 'serve') {
   

   這行是不是該改成

     if (command === 'serve') {
   

2. 交給 external-globals 處理的 package，不需要加入 rollupOptions.external 中。

3. 這錯誤表示產出的程式碼中包含類似下列的 import 語句︰

   import XXX from "react";
   

   建議去檢查這語句來自哪個檔案，並除錯為何 external globals 沒有處理該檔案。

1、确实是mode 2、 试了一下，打包没有排除掉react、react-dom。 还是打包进去了

3 import React from 'react' 是我源代码中的写法，我之前打包工具使用的是webpack 这里rollup不支持bare module写法，所以这里好像报错了

[eight04]

你可以試著插入一個自定的 plugin，印出 externalGlobals 處理後的程式碼︰

...
rollupOptions: {
  plugins: [
    externalGlobals(...),
    {
      name: "my-debug-plugin",
      transform: (code, id) => {
        if (id.match(/my-source-file/)) {
          console.log(id, code);
        }
      }
    }
  ]
}
...

[cixing]

好的，感谢，我去试试

------------------ 原始邮件 ------------------ 发件人: eight @.> 发送时间: 2022年5月27日 04:16 收件人: eight04/rollup-plugin-external-globals @.> 抄送: cixing @.>, Author @.> 主题: Re: [eight04/rollup-plugin-external-globals] 不支持React (Issue #26)

你可以試著插入一個自定的 plugin，印出 externalGlobals 處理後的程式碼︰ ... rollupOptions: { plugins: [ externalGlobals(...), { name: "my-debug-plugin", transform: (code, id) => { if (id.match(/my-source-file/)) { console.log(id, code); } } } ] } ...

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[hans000]

@eight04 我猜测是tsconfig配置了 "jsx": "react-jsx"，源码里不在需要显式的import react from 'react'，所以解析不到了？

[benmcginnis]

@cixing 有用吗 ?