配置typescript运行环境(rollup)

222 阅读1分钟

🌟 git地址: git clone gitee.com/happyTalk/t…

🌟 rollup搭建ts环境:

(1)tsc --init 生产配置文件 tsconfig.json

(2)npm i rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve -D

(3)建rollup 配置文件: rollup.config.js

配置文件内容:

/* * @FilePath: /ts-notebook/rollup.config.js */ 
import ts from 'rollup-plugin-typescript2' 
import nodeResolve from '@rollup/plugin-node-resolve' 
import path from 'path' 
import { fileURLToPath } from 'url' 
const __filename = fileURLToPath(import.meta.url) 
const __dirname = path.dirname(__filename) // 打包的配置对象 

export default { 
    input: './src/index.ts', 
    output: { 
        file: path.resolve(__dirname, 'dist/bundle.js'), // 打包的文件在当前目录下dist文件夹 
        format: 'iife', 
        sourcemap: true 
    }, 
    plugins:[ 
        nodeResolve({ extensions: [ '.js', '.ts' ] }), 
        ts({ 
            tsconfig: path.resolve(__dirname, 'tsconfig.json') 
        }) 
    ] 
}

tsconfig.json

{ 
    "compilerOptions": { 
        "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 
        "module": "ESNext", /* Specify what module code is generated. */ 
        "sourceMap": true, /* Create source map files for emitted JavaScript files. */
        "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 
        "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 
        "strict": true, /* Enable all strict type-checking options. */ 
        "skipLibCheck": true /* Skip type checking all .d.ts files. */ 
    } 
}

package.json

{ 
    "devDependencies": { 
        "@rollup/plugin-node-resolve": "^15.2.3", 
        "rollup": "^4.9.6", 
        "rollup-plugin-typescript2": "^0.36.0", 
        "typescript": "^5.3.3" 
    }, 
    "type": "module", 
    "scripts": { 
        "dev": "rollup -c -w" 
    } 
}

注意:node版本太低,运行代码可能会报错