Rollup、TypeScript、Electron、React 设置
Posted
技术标签:
【中文标题】Rollup、TypeScript、Electron、React 设置【英文标题】:Rollup, TypeScript, Electron, React setup 【发布时间】:2021-01-10 18:55:54 【问题描述】:我正在尝试为电子创建汇总设置并使用打字稿做出反应。我收到 process
的参考错误,未在 /node_modules/react/index.js 中定义。
我创建了以下配置文件:
从 '@rollup/plugin-commonjs' 导入 commonjs 从“汇总插件副本”导入副本 从“@rollup/plugin-typescript”导入打字稿 从“@rollup/plugin-node-resolve”导入 nodeResolve
rollup-config.js:
export default [
// electron
input: 'src/main.ts',
output: [
file: 'build/main.js',
format: 'cjs',
sourcemap: true
,
],
plugins: [
nodeResolve(),
typescript(
target: 'es5',
),
commonjs(
include: './node_modules/**',
),
copy(
targets: [
src: './src/index.html', dest: './build'
]
),
]
,
// react
input: 'src/react/index.tsx',
output: [
file: 'build/scripts.js',
format: 'esm',
sourcemap: true,
globals: [
'react',
],
,
],
plugins: [
typescript(
target: 'es5',
module: 'ESNext',
),
nodeResolve(),
commonjs(
include: './node_modules/**',
),
]
]
tsconfig.json:
"compilerOptions":
"target": "es5",
"module": "commonjs",
"lib": [
"dom",
"es2015",
"es2016",
"es2017"
],
"allowJs": true,
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"strict": true,
"alwaysStrict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"esModuleInterop": true,
"jsx": "react",
,
"exclude": [
"node_modules"
]
我希望你能帮助我解决这个问题。很遗憾,我无法弄清楚问题所在。
问候
【问题讨论】:
【参考方案1】:我稍微摆弄了一下,让它按照我想要的方式工作:
rollup.config.js
import commonjs from '@rollup/plugin-commonjs'
import copy from 'rollup-plugin-copy'
import typescript from '@rollup/plugin-typescript'
import nodeResolve from '@rollup/plugin-node-resolve'
import replace from '@rollup/plugin-replace'
export default [
// electron
input: 'src/main.ts',
output: [
file: 'build/main.js',
format: 'cjs',
sourcemap: true
,
],
plugins: [
nodeResolve(),
typescript(),
commonjs(
include: './node_modules/**',
),
copy(
targets: [
src: './src/index.html', dest: './build'
]
),
]
,
// react
input: 'src/react/index.tsx',
output: [
file: 'build/scripts.js',
format: 'esm',
sourcemap: true,
globals: [
'react',
],
,
],
plugins: [
typescript(
module: 'ESNext',
),
commonjs(
include: './node_modules/**',
),
nodeResolve(),
replace(
'process.env.NODE_ENV': JSON.stringify('production')
),
]
]
tsconfig.json
"compilerOptions":
"target": "es5",
"module": "commonjs",
"lib": [
"dom",
"es2015",
"es2016",
"es2017"
],
"allowJs": true,
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"strict": true,
"alwaysStrict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"esModuleInterop": true,
"jsx": "react",
,
"exclude": [
"node_modules"
]
【讨论】:
以上是关于Rollup、TypeScript、Electron、React 设置的主要内容,如果未能解决你的问题,请参考以下文章
Rollup、TypeScript、Electron、React 设置
将 Rollup、ES 模块、TypeScript 和 JSX 连接在一起时的令人困惑的行为