I'm a web developer, interested opensource.
- 🤔 Focusing on @vuejs, @vite, @typescript
- 😄 Thanks for you reading
use to external resources
License: MIT License
Hey, thanks for your plugin 👋
Coming from this Storybook PR, I took a quick look at the source code of this plugin. I see it generates cached files, but I'm quite confused: I could not find where those cached files are consumed. Is there anything I could be missing?
It correctly work but report a warning while building
<script src="xxx.js"> in "/index.html" can't be bundled without type="module" attribute
Then I edit it as <script type="module" src="xxx.js">
but it report error:
Error: [vite]: Rollup failed to resolve import "xxx.js" from ".../index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
And here is my viteExternalsPlugin config:
viteExternalsPlugin(
{ xxx: 'Xxx' },
{
disableInServe: true
}
)
尝试使用的时候,会出现process没有定义
if (process.env.NODE_ENV === 'production') {
// DCE check should happen before ReactDOM bundle executes so that
// DevTools can report bad minification during injection.
checkDCE();
module.exports = require('./cjs/react-dom.production.min.js');
} else {
module.exports = require('./cjs/react-dom.development.js');
}
The current config about source mapping is to create the most accurate source map which can under certain circumstances cause building failure like the following image.
The root cause is this line. By turning of hi-res this problem can be solved.
I was wondering if it is viable to provide an option to control the config of source-map generation: Like the following git diff shows
I tested your plugin and it's working great for imports !
However I have some use case where I do:
export { name } from 'my-external';
// or
export { default } from 'my-external';
Right now the plugins will replace those exports with empty string.
I have two Vite configs that use the same node_modules
directory but have different externals config.
vite-plugin-externals
uses a single non-configurable cache directory for both of them. So there are conflicts. And only a single plugin works correctly.
Proposal: allow to configure cache directory.
Vite itself allows it.
I am eager to bring MR to fix it.
What do you think about that?
如下配置,打包后搜索代码。发现没有window.Vue。删掉filter后打包,就有window.Vue
plugins: [
vue(),
viteExternalsPlugin(
{
vue: 'Vue',
'vue-router': 'VueRouter',
// axios: 'axios',
}, {
filter(code, id) {
// console.log(id, 'pinia pinia ');
// 处理 pinia,解决 cdn 加载 Vue 响应式丢失问题
if (id.includes('pinia')) {
// console.log(id, 'pinia pinia ');
return true;
}
return false;
},
disableInServe: true,
}
),
],
First off, thanks for making this extension public and maintaining it!
I was using this, and at some point it stopped working, and I was quite confused why. Then I reverted my code that provided the externals back to the previous name and everything worked again. It looks like the cache y'all use is not using the name as a key to bust the cache. So changing this code:
viteExternalsPlugin({
react: 'myReact',
}),
to:
viteExternalsPlugin({
react: ['myMicrofrontendNamespace', 'react'],
}),
the importReact
function is still trying to return window.myReact
even after a server restart. but removing .vite/deps
fixes the issue. So I believe there's an issue in the cache logic.
I've been struggling with externals related errors while trying to import a react module I'm building with Vite. With the normal rollup externals config I kept getting Cannot read properties of null (reading 'useEffect')
, so React itself being null, and with different config I got window is undefined
. With this plugin these errors seem to be solved. At the moment I'm still getting this error:
TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')
It seems weird because it's also a property of the React object, which is accessable now. I can't find anything helpful about it so figured asking here. Somebody knows what I'm doing wrong?
Bit more context: I listed these packages as devDependencies
and peerDependencies
and they are installed in the other project, the other project is in Next, I don't think thats related to the issue though.
This is the config I'm passing:
external({
react: 'React',
'react-dom': 'ReactDOM',
'styled-components': 'styled'
}, {
useWindow: false,
disableSsr: true
})
build: {
rollupOptions: {
external: ['react', 'react-dom', 'dayjs', 'antd'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
dayjs: 'dayjs',
antd: 'antd',
},
paths: {
react:
'https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js',
'react-dom':
'https://unpkg.com/[email protected]/umd/react-dom.production.min.js',
dayjs:
'https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js',
antd: 'https://cdnjs.cloudflare.com/ajax/libs/antd/5.9.4/antd.min.js',
},
},
}
},
vite可以配置external相关,为啥还要出个插件呢?
Just wanted to see if you had plans for a Vite 3 compatible version? It might be as simple as updating the peer dependency semver.
支持 window['a']['b']['c']
Dist structure has been changed, can't resolve viteExternalPlugins by the previous way.
import { viteExternalsPlugin } from 'vite-plugin-externals'
I want to external vue
, but it export * from 'vue'
seems doesn't handled by this plugin.
FYI. the problem was from vue-demi
I have a external module @namespace/something
, and export to window var with the key @namespace/something
so I set the plugin config like this
viteExternalsPlugin({'@namespace/something' : '@namespace/something'})
and the using code like this
import { foo } from '@namespace/something'
then the code generated by the plugin go error like this
const foo = window.@namespace/something.foo
while it should be like this
const foo = window['@namespace/something'].foo
package.json
"dependencies": {
"vant": "^3.4.5",
"vue": "^3.2.25",
}
src/plugins/vant.ts
import Vant from "vant";
export { Vant };
src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { Vant } from '@/plugins/vant';
createApp(App).use(Vant).mount('#app');
vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteExternalsPlugin } from 'vite-plugin-externals';
export default defineConfig(async ({ mode }) => {
return {
plugins: [
vue(),
mode === 'production'
? viteExternalsPlugin({
vue: 'Vue',
vant: 'vant',
})
: undefined,
],
},
};
});
此时 vant 是没有被替换的。
vite.config.js config
export default defineConfig({
plugins: [
viteExternalsPlugin({
react: 'React',
'react-dom': 'ReactDOM',
}),
reactRefresh()
]})
一个关于pinia偏要适配还走vue-demi适配vue2导致的坑已经有人提了 #19 ,就不赘述了嘻嘻|・ω・)
关于处理后的代码,不配置 useWIndow: false 的话都替换成了 window[module] 就赶脚有点占字数Σ(⊙▽⊙,配置了 useWindow: true 的话不能用全局变量名引入,比如 import axios from 'axios'
,否则会报错 cannot access 'axios' before initialization
,因为变成了 const axios = axios
o(╥﹏╥)o
P.S 找了各种vite的external相关插件,要么不适配vite 4,要么只在build生效,有2个像webpack那样处理的也坑死,vite-plugin-external 受rollup的zz限制只能改输出文件格式才行,另一个也有了不起的 bug
ε=(´ο`*)))唉 3202了入vite还是心好累,各种坑,又不是本地跑个demo就完事儿(ಥ﹏ಥ)、、、、
With following simple App.vue file:
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld msg="Vite + Vue" />
</template>
Vite internal server issue error as follows:
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
10:06:42 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
Plugin: vite:import-analysis
File: /Volumes/devtmp/MyVue3/trial/src/App.vue:3:10
1 | <script setup>
2 | import HelloWorld from './components/HelloWorld.vue'
3 | </script>
| ^
4 |
5 | <template>
at formatError (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46)
at TransformContext.error (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19)
at TransformContext.transform (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39475:22)
at async Object.transform (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30)
at async loadAndTransform (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29)
How have I should transformed the import
of other vue component? Thank you for your help.
If you run npm install for the vite-plugin-externals\examples\vue example
it gives an error:
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*
How do I fix this?
Hi Crcong, I was using your excellent plugin in my own project, thanks for the work!
Since the esbuild used by vite is relying on the hoisted feature of esmodule, see evanw/esbuild#1395 (comment), there would a chance the error: cannot access xxx before initialization
will be occurred if we just replace the import statments with const declaration inline. Any thoughts on this?
I have some external module, and have to import by star like import * from 'my-external'
while the code generated is just emty string
查了下文档,如果需要提供sourcemap,则需要返回 map: null
(未对原代码进行修改)或者返回新的 map: newMap
vite-plugin-externals/src/index.ts
Line 127 in 62bb625
return { code, map: null }
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.