originjs / vite-plugins

Other
172 stars 28 forks source link

multiple transform for some commonjs package #5

Open SheldonWatson opened 3 years ago

SheldonWatson commented 3 years ago

image

look at this screenshot,this file has been transformed by some "esm to cjs"tools,and was compatibled by the function __importDefault, so 'no_data_png_1' will by wrapped with 'default' property, and with your plugin, you transfromed 'require' to 'import', which will be transformed twice and wrapped another 'default' property.

In summary, this plugin is not suitable for package that is transformed by 'esm to cjs' tools!

flyfishzy commented 3 years ago

Hi, please provide more details, eg. a reproduction repo will be better, Thx!

SheldonWatson commented 3 years ago

npm: 7.17.0 node: v16.1.0 vite: 2.4.4

其实很好懂呀,如果一个包是 由esm转成cjs,他就会被__importDefault这种转一遍,多了个default属性; 这个插件转成import后,vite的应该又会转一遍,就又多了个default

flyfishzy commented 3 years ago

Try to use exclude option:

exclude: string[] Dependencies to exclude from transform.


import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

export default { plugins: [ viteCommonjs({ exclude: 'your_lib' }) ] }

SheldonWatson commented 3 years ago

Try to use exclude option:

exclude: string[] Dependencies to exclude from transform.

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

export default {
    plugins: [
        viteCommonjs({
       exclude: 'your_lib'
    })
    ]
}

I tried this, but still don't work...

SheldonWatson commented 3 years ago

I upload my demo:https://github.com/SheldonWatson/vite-commonjs-isure

image

SheldonWatson commented 3 years ago

BTW,when I import viteCommonjs, the reactRefresh plugin throw this error: image

jiawulin001 commented 3 years ago

I have released a new version of @originjs/vite-plugin-commonjs@1.0.0-beta7 that fixes this issue.

Again, just add the viteCommonjs plugin to vite.config.js:

plugins: [
    viteCommonjs()
  ]

The esbuildCommonjs plugin is used to convert commonJS code that is not handled in Pre-bundling, it is not needed in this demo you provided.

SheldonWatson commented 3 years ago

BTW,when I import viteCommonjs, the reactRefresh plugin throw this error: image

Thx, It does work when I only used the 'viteCommonjs'plugin, but did you uncomment this line: image the react Refresh will throw the error!

SheldonWatson commented 3 years ago

I have released a new version of @originjs/vite-plugin-commonjs@1.0.0-beta7 that fixes this issue.

Again, just add the viteCommonjs plugin to vite.config.js:

plugins: [
    viteCommonjs()
  ]

The esbuildCommonjs plugin is used to convert commonJS code that is not handled in Pre-bundling, it is not needed in this demo you provided.

As far as I know, vite will pre-bundling all files that are used by the current page, can you tell me what scene that the code will not handled in Pre-bundling?