目录
.babelrc
Rollup+Vue+TS
scripts/rollup.config.js
package.json
可以同时使用多个 Plugin 和 Preset,此时,它们的执行顺序非常重要。文章来源:https://www.toymoban.com/news/detail-601852.html
先执行完所有 Plugin,再执行 Preset。 多个 Plugin,按照声明次序顺序执行。 多个 Preset,按照声明次序逆序执行。 比如 .babelrc配置如下,那么执行的顺序为:文章来源地址https://www.toymoban.com/news/detail-601852.html
- Plugin:transform-react-jsx、transform-async-to-generator
- 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"
},
到了这里,关于TypeScript基础篇 - Vue-TS-Rollup 环境实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!