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),
|
|
},
|
|
});
|