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 设置

使用TypeScript和Rollup构建迭代器

typescript Rollup.js rxjs全局变量

将 Rollup、ES 模块、TypeScript 和 JSX 连接在一起时的令人困惑的行为

未找到模块:使用 @rollup/plugin-json 时无法解析“集群”

实战篇最详细的Rollup打包项目教程