Question

我正在研究ESNext TypeScript项目。目前，我在运行捆绑程序（Rollup）和单元测试（Mocha / Chai）时遇到一些困难。在编译过程中使用tsc或babel令我很困惑，而且似乎无法完全理解所有工作原理。

到目前为止，我有以下配置：

tsconfig.json（项目的主要配置；在rollup.config.json中使用）

{
  "compilerOptions": {
    "target": "esnext",
    "module": "es2015",
    "lib": ["esnext", "dom"],
    "declaration": true,
    "outDir": "./lib",
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "types": [
      "node",
      "three"
    ], 
    "esModuleInterop": true,
    "inlineSourceMap": true,
    "pretty": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
  ]
}

rollup.config.js（用于主项目模块捆绑的汇总文件）

import typescript from 'rollup-plugin-typescript2';
import babel from 'rollup-plugin-babel';
import globals from 'rollup-plugin-node-globals';
import builtins from '@joseph184/rollup-plugin-node-builtins';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import pkg from "./package.json";

export default [
    {
        input: './src/index.ts',
        plugins: [
            typescript(),
        ],
        external: [
            "three"
        ],
        output: [
            {
                file: pkg.module,
                format: 'es'
            }
        ]
    },
    {
        input: './src/index.ts',
        plugins: [
            resolve({
                preferBuiltins: true,
                mainFields: ['module', 'main'],
            }),
            globals({
                process: true,
                global: true,
                dirname: true,
                filename: true
            }),
            builtins(),
            commonjs(),
            typescript(),
            babel({
                babelrc: true
            }),
        ],
        external: [
            "three"
        ],
        output: [ // Required; Array = multiple outputs
            {
                file: pkg.main,
                format: 'umd',
                name: 'Divine'
            },
            {
                file: "lib/divine.cjs.js",
                format: 'cjs'
            }
        ]
    }
]

.babelrc（用于主项目模块捆绑的小选项）

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "entry",
            "debug": "true"
        }],
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-runtime",
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-syntax-dynamic-import"
    ],
    "compact": "auto",
    "exclude": [
        "./src/**/test/**/*.spec.ts",
        "./node_modules/*"
    ]
}

tsconfig.test.json（tsc的配置mocha，ts-node作为编译器）

{
    "compililerOptions": {
        "target": "esnext",
        "module": "commonjs",
        "lib": ["esnext", "dom"],
        "moduleResolution": "node",
        "esModuleInterop": true,
        "types": [
            "chai",
            "mocha",
        ],
        "exclude": [
            "src/core/loggingsystem/test",
            "src/core/messagesystem/test"
        ]
    }
}

我的主要问题是：es5的esnext应该使用哪个（对于大多数浏览器支持）？我想使用ESNext代码，但是我希望以最小的摩擦进行构建。本地使用tsc会更好吗？还是应该混用/充分使用Babel？我在构建时遇到了非常困难的时刻，因为我仍然不确定如何将它们组合在一起。

非常感谢您的帮助！

tsc vs babel：更好的翻译/编译工作流程

0 个答案: