时间戳

首页 > 解决方案 > 我需要帮助将环境变量添加到我的 TypeScript 工具链

javascript - 我需要帮助将环境变量添加到我的 TypeScript 工具链

问题描述

我请求帮助设置打字稿库的编译和开发环境。当被 Web 应用程序框架使用和被脚本标签使用时，该库应该可以工作。我目前正在使用 Webpack 作为开发服务器，因此我可以调试和 TSC 构建（cjs + esm）。引发这篇文章的问题是必须不断地将我的 API 字符串切换http://localhost:8080到https://production.com. 为了在我的编译中构建dev和变量，我需要哪些工具或更改？prod

这是我到目前为止正在做的事情：

package.json 片段

"main": "./lib/cjs/index.js",
"module": "./lib/esm/index.js",
"files": [
    "lib/**/*",
    "README.md"
],
"scripts": {
    "build:esm": "tsc -p tsconfig.json --outDir lib/esm --module ES2020 --sourceMap false",
    "build:cjs": "tsc -p tsconfig.json --outdir lib/cjs --module commonjs --sourceMap false",
    "clean:build": "rimraf lib",
    "clean:serve": "rimraf dist",
    "build": "rimraf lib && npm run build:esm && npm run build:cjs",
    "serve": "rimraf dist && webpack-dev-server"
}

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const SRC = path.resolve(__dirname, 'src')
const ENTRTY = path.resolve(__dirname, 'src', 'debug.ts')
const DIST = path.resolve(__dirname, 'dist')
module.exports = {
    mode: 'development',
    context: SRC,
    entry: ENTRTY,
    output: {
        path: DIST,
        filename: 'index.js',
    },
    devtool: 'source-map',
    devServer: {
        contentBase: DIST,
        writeToDisk: true,
        host: '0.0.0.0',
        port: 8080,
        https: true,
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin()
    ],
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                include: [SRC]
            }
        ]
    }
}

我的工具链目前不允许我这样做：

import Axios from 'axios'
import SocketIO from 'socket.io-client'

export const axios = Axios.create({
    baseURL: process.env.SERVER_HTTP_URL, //<-- can't do env-vars with tsc build
    withCredentials: true
})

标签： javascripttypescriptwebpackrollup

解决方案

typescript 不能那样做，但是 gulp 可以做到

const replace = require('gulp-replace');
const { src, dest } = require('gulp');
 
exports.default = function() {
    return src(['*.js'], {base: './'})
    .pipe(replace('__XXXX__', 'some variables'))
    .pipe(dest('./'));
}

推荐阅读