TypeScript基础篇 - Vue-TS-Rollup 环境实战

目录

.babelrc

Rollup+Vue+TS

scripts/rollup.config.js

package.json

可以同时使用多个 Plugin 和 Preset，此时，它们的执行顺序非常重要。

先执行完所有 Plugin，再执行 Preset。 多个 Plugin，按照声明次序顺序执行。 多个 Preset，按照声明次序逆序执行。 比如 .babelrc配置如下，那么执行的顺序为：

1. Plugin：transform-react-jsx、transform-async-to-generator
2. Preset：es2016、es2015

.babelrc

{
  "plugins": [ 
    "transform-react-jsx",
    "transform-async-to-generator"
  ],
  "presets": [ 
    "es2015",
    "es2016"    
  ]
}

Rollup+Vue+TS

scripts/rollup.config.js

import path from 'path'
// rollup-plugin-typescript2版本多增加了校验，更好用一些
// npm install typescript -D
// npm install rollup-plugin-typescript2
import typescript from 'rollup-plugin-typescript2'
// babel
// npm install @rollup/plugin-babel
import babel from '@rollup/plugin-babel'
// npm install rollup-plugin-vue -D
import vue from 'rollup-plugin-vue'
export default [{
  // 入口文件
  input: path.resolve(__dirname, "../src/main.tsx"),
  // 打包后信息配置
  output: {
    file: "build/main.js",
    format: 'commonjs',
    name: 'main'
  },
  // 配置插件
  plugins: [
    vue(),//报sfc单文件组件报错 vue插件 rollup-plugin-vue
    typescript(),
    babel({// 处理vue ts jsx
      exclude: "node_modules/**", // 排除
      // 编译报错：不是js的文件，加下面这个处理
      extensions: [".js", ".jsx", ".tsx", ".ts"],// 让babel处理这些类型文件
      presets: [
        "@babel/preset-env",
        "@babel/preset-typescript"
      ],
      plugins: [
        "@vue/babel-plugin-jsx"
      ]
    })
  ]
}]

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config scripts/webpack.config.js",
    "serve": "webpack serve --config scripts/webpack.config.js",
    "buildrollup": "rollup -c --config script/rollup.config.js"
  },