132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
import { resolve } from "path";
|
||
import { defineConfig } from 'vite'
|
||
import replace from '@rollup/plugin-replace';
|
||
import react from '@vitejs/plugin-react';
|
||
import { viteExternalsPlugin } from 'vite-plugin-externals';
|
||
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
||
import manifest from './src/manifest';
|
||
|
||
const isDev = ['development', 'develop'].includes(process.env.NODE_ENV);
|
||
|
||
console.warn('Vite building in ', isDev ? 'DEVELOPER MODE' : 'PRODUCTION MODE');
|
||
|
||
const optimizeDepsInclude = [
|
||
'**/*.scss',
|
||
];
|
||
// В dev: подготавливаем react/react-dom/react-redux как ESM-шимы
|
||
if (isDev) {
|
||
optimizeDepsInclude.push('react-redux')
|
||
}
|
||
|
||
export default defineConfig({
|
||
plugins: [
|
||
...(isDev ? [
|
||
viteExternalsPlugin({
|
||
react: 'React',
|
||
'react-dom': 'ReactDOM',
|
||
redux: 'Redux',
|
||
'react-redux': 'ReactRedux',
|
||
'prop-types': 'PropTypes',
|
||
'react-bootstrap': 'ReactBootstrap',
|
||
'react-router-dom': 'ReactRouterDom',
|
||
}),
|
||
] : [
|
||
]),
|
||
|
||
// 2) В dev включаем плагин React (он генерит preamble + jsx runtime + fast refresh)
|
||
...(isDev ? [react()] : []),
|
||
|
||
cssInjectedByJsPlugin(),
|
||
replace({
|
||
// Переопределяем NODE_ENV внутри бандла
|
||
'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
|
||
preventAssignment: true,
|
||
}),
|
||
],
|
||
|
||
// Трансформация JSX через esbuild
|
||
esbuild: {
|
||
jsx: 'transform',
|
||
jsxFactory: 'React.createElement',
|
||
jsxFragment: 'React.Fragment',
|
||
},
|
||
|
||
// В dev: подготавливаем react/react-dom/react-redux как ESM-шимы
|
||
optimizeDeps: {
|
||
include: optimizeDepsInclude,
|
||
},
|
||
|
||
css: {
|
||
preprocessorOptions: {
|
||
scss: {
|
||
modules: true,
|
||
},
|
||
},
|
||
modules: {
|
||
localsConvention: 'camelCaseOnly',
|
||
},
|
||
},
|
||
|
||
build: {
|
||
lib: {
|
||
entry: resolve(__dirname, 'src/index.tsx'),
|
||
formats: ['umd'],
|
||
name: manifest.id,
|
||
cssFileName: manifest.id,
|
||
fileName: () => 'main.js',
|
||
},
|
||
rollupOptions: {
|
||
// В проде всё это выносится в глобальные переменные Mattermost
|
||
external: [
|
||
'react',
|
||
'react-dom',
|
||
'redux',
|
||
'react-redux',
|
||
'prop-types',
|
||
'react-bootstrap',
|
||
'react-router-dom',
|
||
'core-js',
|
||
'react-intl',
|
||
],
|
||
output: {
|
||
inlineDynamicImports: true,
|
||
manualChunks: undefined,
|
||
globals: {
|
||
react: 'React',
|
||
'react-dom': 'ReactDOM',
|
||
redux: 'Redux',
|
||
'react-redux': 'ReactRedux',
|
||
'prop-types': 'PropTypes',
|
||
'react-bootstrap': 'ReactBootstrap',
|
||
'react-router-dom': 'ReactRouterDom',
|
||
'react-intl': 'ReactIntl',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
|
||
server: {
|
||
port: 3001,
|
||
cors: true,
|
||
headers: {
|
||
'Access-Control-Allow-Origin': '*',
|
||
},
|
||
// ----------------------------------------------------
|
||
// HMR-настройка для плагина, загружаемого в Loop
|
||
hmr: {
|
||
protocol: 'ws', // WebSocket
|
||
host: 'localhost', // где запущен vite dev
|
||
port: 3001, // тот же порт
|
||
clientPort: 3001, // куда клиент будет подключаться
|
||
},
|
||
// ----------------------------------------------------
|
||
},
|
||
|
||
define: {
|
||
__PLUGIN_DEV__: isDev,
|
||
__PLUGIN_COMPONENTS_HOST__: isDev
|
||
? JSON.stringify('http://localhost:3001')
|
||
: JSON.stringify(null),
|
||
},
|
||
});
|