dogc之rollup配置秘籍：踏上构建之路

2023-12-10 05:12:23

1. 支持Typescript

dogc内置了对Typescript的支持，这使得我们可以在构建过程中直接使用Typescript代码，而无需额外的编译步骤。这不仅简化了构建流程，而且还提高了构建效率。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  }
}

2. 导出ESM、CJS、UMD模块规范

dogc支持导出ESM、CJS和UMD这三种模块规范，这使得构建出的代码可以轻松地集成到不同的项目中。

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: ['esm', 'cjs', 'umd']
  }
};

3. 组件维度split code

dogc支持组件维度的split code，这使得我们可以将不同的组件打包成独立的文件，从而减少最终构建文件的体积，提高加载速度。

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm',
    chunkFileNames: '[name]-[hash].js'
  }
};

4. 自定义rollup配置

dogc还允许我们自定义rollup的配置，这使得我们可以根据自己的项目需求进行更精细的配置。

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'umd',
    globals: {
      react: 'React',
      react-dom: 'ReactDOM'
    }
  },
  plugins: [
    babel({
      exclude: 'node_modules/**'
    }),
    terser()
  ]
};

5. 构建命令

dogc提供了简单的构建命令，我们可以通过以下命令轻松地构建项目：