|
1 | | -import resolve from '@rollup/plugin-node-resolve'; |
2 | 1 | import babel from 'rollup-plugin-babel'; |
3 | | -import { terser } from 'rollup-plugin-terser'; |
4 | | -import replace from '@rollup/plugin-replace'; |
5 | | -import url from '@rollup/plugin-url'; |
6 | | -import hotcss from 'rollup-plugin-hot-css'; |
7 | | -import copy from 'rollup-plugin-copy'; |
8 | | - |
9 | | -const appName = 'rollupReactApp'; |
10 | | -const NODE_ENV = process.env.NODE_ENV || 'development'; |
11 | | -const production = NODE_ENV !== 'development' && NODE_ENV !== 'test'; |
12 | | -const development = NODE_ENV === 'development'; |
13 | | -const outputFile = production ? '/static/js/index' : '/index.[hash]'; |
14 | | -const publicUrl = process.env.PUBLIC_URL || 'http://localhost:9000'; |
15 | | -const esmFile = `${outputFile}.js`; |
16 | | -const iifeFile = `${outputFile}.legacy.js`; |
17 | | -const styles = development ? '/styles.[hash].css' : 'static/assets/styles.css'; |
18 | | - |
19 | | -const genScripts = () => { |
20 | | - let scripts = `<script async type="module" src="${esmFile}"></script>`; |
21 | | - if (production) { |
22 | | - scripts += `<script nomodule src="${iifeFile}"></script>`; |
23 | | - } |
24 | | - return scripts; |
25 | | -}; |
26 | | - |
27 | | -const plugins = babelConf => [ |
28 | | - copy({ |
29 | | - targets: [ |
30 | | - { |
31 | | - src: [ |
32 | | - 'public/favicon.ico', |
33 | | - 'public/logo192.png', |
34 | | - 'public/logo512.png', |
35 | | - 'public/manifest.json', |
36 | | - 'public/robots.text', |
37 | | - 'public/images', |
38 | | - ], |
39 | | - dest: 'build', |
40 | | - }, |
41 | | - { |
42 | | - src: 'public/index.html', |
43 | | - dest: 'build', |
44 | | - transform: contents => |
45 | | - contents |
46 | | - .toString() |
47 | | - .replace('%SCRIPTS%', genScripts()) |
48 | | - .replace(/%PUBLIC_URL%/g, publicUrl) |
49 | | - .replace('%STYLES%', styles), |
50 | | - }, |
51 | | - ], |
52 | | - }), |
53 | | - replace({ |
54 | | - 'process.env.NODE_ENV': JSON.stringify(NODE_ENV), |
55 | | - }), |
56 | | - url(), |
57 | | - hotcss({ |
58 | | - hot: development, |
59 | | - filename: development ? 'styles.css' : 'static/assets/styles.css', |
60 | | - }), |
61 | | - babel(babelConf), |
62 | | - resolve({ extensions: ['.mjs', '.js', '.jsx', '.json'] }), |
63 | | - production && terser(), |
64 | | -]; |
65 | | - |
66 | | -const esm = { |
67 | | - input: 'src/index.js', |
68 | | - output: { |
69 | | - dir: 'build', |
70 | | - format: 'esm', |
71 | | - entryFileNames: development ? '[name].[hash].js' : 'static/js/[name].js', |
72 | | - assetFileNames: development ? '[name].[hash][extname]' : '[name][extname]', |
73 | | - sourcemap: true, |
74 | | - }, |
75 | | - plugins: plugins({ |
76 | | - exclude: 'node_modules/**', |
77 | | - presets: [ |
78 | | - [ |
79 | | - '@babel/preset-env', |
80 | | - { |
81 | | - targets: { |
82 | | - esmodules: true, |
83 | | - }, |
84 | | - }, |
85 | | - ], |
86 | | - '@babel/preset-react', |
87 | | - ], |
88 | | - plugins: development ? ['react-refresh/babel'] : [], |
89 | | - }), |
90 | | -}; |
| 2 | +import resolve from '@rollup/plugin-node-resolve'; |
91 | 3 |
|
92 | | -const iife = { |
93 | | - input: 'src/index.js', |
94 | | - output: { |
95 | | - dir: 'build', |
96 | | - format: 'iife', |
97 | | - entryFileNames: 'static/js/[name].legacy.js', |
98 | | - assetFileNames: development ? '[name][hash][extname]' : '[name][extname]', |
99 | | - name: appName, |
100 | | - sourcemap: true, |
101 | | - }, |
102 | | - plugins: plugins({ |
103 | | - presets: [ |
104 | | - [ |
105 | | - '@babel/preset-env', |
106 | | - { |
107 | | - targets: { |
108 | | - browsers: ['> 0.5%'], |
109 | | - }, |
110 | | - }, |
111 | | - ], |
112 | | - '@babel/preset-react', |
113 | | - ], |
114 | | - }), |
| 4 | +export default { |
| 5 | + input: './src/index.js', |
| 6 | + external: [ |
| 7 | + 'react', |
| 8 | + 'react-dom', |
| 9 | + '@material-ui/core/styles', |
| 10 | + '@material-ui/core/Slider', |
| 11 | + '@material-ui/core/Box', |
| 12 | + '@material-ui/core/Button', |
| 13 | + '@material-ui/core/Divider', |
| 14 | + '@material-ui/core/Tooltip', |
| 15 | + '@material-ui/core/TextField', |
| 16 | + '@material-ui/core/FormControl', |
| 17 | + '@material-ui/core/FormHelperText', |
| 18 | + '@material-ui/core/InputLabel', |
| 19 | + '@material-ui/core/Input', |
| 20 | + '@material-ui/core/InputAdornment', |
| 21 | + '@material-ui/core/Popover', |
| 22 | + 'material-ui-popup-state', |
| 23 | + 'prop-types', |
| 24 | + 'react-is', |
| 25 | + 'hoist-non-react-statics', |
| 26 | + ], |
| 27 | + output: [{ file: './dist/index.js', format: 'esm', sourcemap: true }], |
| 28 | + plugins: [babel(), resolve({ extensions: ['.js', '.jsx'] })], |
115 | 29 | }; |
116 | | - |
117 | | -const config = [esm]; |
118 | | -if (production) { |
119 | | - config.push(iife); |
120 | | -} |
121 | | -export default config; |
0 commit comments