vite和rollup打包开发环境

DSLMing

于 2023-06-30 10:24:10 发布

阅读量454

点赞数

分类专栏：前端基础文章标签：打包

本文链接：https://blog.csdn.net/qq_21476953/article/details/131470887

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

vite 适合应用开发
rollup 适合底层基础库开发

1、vite 示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    body {
      margin: 0;
      font-family: '微软雅黑';
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

  </style>

</head>
<body>
  <script type="module">
    import App from './app.js'
    new App();
  </script>
</body>
</html>

package.json

{
  "name": "deckgl-examples-tagmap",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "vite --open",
    "build": "vite build"
  },
  "dependencies": {
    "@deck.gl/core": "^8.9.19",
    "@deck.gl/layers": "^8.9.19",
    "@loaders.gl/csv": "^3.4.2",
    "d3-scale": "^2.0.0",
    "deck": "^0.0.4",
    "deck.gl": "^8.9.0",
    "maplibre-gl": "^2.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-map-gl": "^7.0.0"
  },
  "devDependencies": {
    "typescript": "^4.6.0",
    "vite": "^4.0.0"
  }
}

app.js

import { Deck } from '@deck.gl/core';
import { TextLayer } from '@deck.gl/layers';
window.Deck = Deck;

// const { DeckGL, TextLayer } = DECK;

export default class App {
  constructor() {
    const textLayer = new TextLayer({
      data: [
        {
          position: [-122.402, 37.79],
          fontFamily: '微软雅黑',
          text: 'Hello World发',
          sdf: true,
          fontSize: 96
        }
      ],
      getPosition: d => d.position,
      getText: d => d.text
    });

    const deck = new Deck({
      container: 'container',
      initialViewState: {
        longitude: -122.402,
        latitude: 37.79,
        zoom: 12
      },
      // controller: true,
      layers: [
        textLayer
      ]
    });

  }
}

2、rollup+ts示例

package.json

{
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "wa": "rollup -c rollup.watch.js -w",
    "bu": "rollup -c rollup.build.js"
  },
  "repository": {
    "type": "git"
  },
  "types": "libs/dist",
  "author": "",
  "license": "ISC",
  "bugs": {
  },
  "devDependencies": {
    "@rollup/plugin-image": "^3.0.1",
    "@rollup/plugin-typescript": "^8.2.5",
    "rollup": "^2.58.0",
    "rollup-plugin-dts": "^5.0.0",
    "rollup-plugin-esbuild": "^4.10.1",
    "rollup-plugin-glsl": "^1.3.0",
    "rollup-plugin-glslify": "1.3.1",
    "ts-loader": "^7.0.5",
    "tslib": "^2.3.1",
    "typescript": "^4.0.2"
  },
  "dependencies": {
    "esbuild": "^0.15.12",
    "fs": "^0.0.1-security",
    "path": "^0.12.7",
    "rollup-plugin-copy-assets": "^2.0.3"
  }
}

rollup.build.js


import glsl from 'rollup-plugin-glsl';
import esbuild from 'rollup-plugin-esbuild'

export default {
  input: './src/index.ts',
  output: {
    file: './dist/HelloWorldLib.js',
    format: 'es',
  },
  plugins: [
    glsl({
      // By default, everything gets included
      include: [
        'src/**/*.glsl',
        'src/**/*.vert',
        'src/**/*.frag'],
      // Source maps are on by default
      sourceMap: true
    }),
    // typescript(),
    esbuild()
  ]
};

rollup.watch.js

import baseConfig from './rollup.build'

export default {
  ...baseConfig,
  watch: {
    include: './src/**'
  }
};

tsconfig.json

{
  "compilerOptions": {
    "noUnusedLocals": false,
    "importHelpers": true,
    "moduleResolution": "node",
    "module": "esNext",
    "target": "es6",
    "declaration": true,
    "declarationDir": "./types",
    "sourceMap": false,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "skipLibCheck": true,
    "isolatedModules":true,
    "lib": [
      "es5",
      "dom",
      "es2015.promise",
      "es2015.collection",
      "es2015.iterable",
      "es2015"
    ],
  },
  "include": ["src"],
  "exclude": ["src/todo/*"]
}

src/index.ts

export class HelloWorldModuleLib {
	//do someing
}

DSLMing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vite和rollup打包开发环境

vite和rollup打包开发环境
复制链接

扫一扫

专栏目录

vite和rollup打包开发环境

1、vite 示例

2、rollup+ts示例

“相关推荐”对你有帮助么？