Babel.js Vue -如何根据环境很好地应用巴别塔?

new9mtju  于 2022-12-20  发布在  Babel
关注(0)|答案(1)|浏览(162)

巴别塔在舞台环境中被应用为es 5,但在生产环境中使用es6。
我认为它适用于相同的webpack构建。
尚未反映source_map。
在生产环境中,它使用es6语法。
我不知道在哪里修。还附上了一张照片。
请救救我!
第一个月

NODE_ENV=production

env.build_stage

NODE_ENV=stage

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "strict": true,
        "noImplicitAny": false,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "types": ["webpack-env"],
        "paths": {
            "@/*": ["src/*"],
            "tslib": ["path/to/node_modules/tslib/tslib.d.ts"]
        },
        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    },
    "include": ["src/types/**/*.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
    "exclude": ["node_modules"]
}

package.json

...more
"scripts": {
        "serve": "vue-cli-service serve  --mode local --port 8081",
        "build_stage": "vue-cli-service build --mode build_stage",
        "build_production": "vue-cli-service build --mode build_production",
    },
"dependencies": {
        ... more
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        ... more
    },
    "devDependencies": {
        more ...
        "@vue/cli-plugin-babel": "~4.5.15",
        "@vue/cli-plugin-eslint": "~4.5.15",
        "@vue/cli-plugin-router": "~4.5.15",
        "@vue/cli-plugin-typescript": "~4.5.15",
        "@vue/cli-plugin-vuex": "~4.5.15",
        "@vue/cli-service": "~4.5.15",
        "@vue/compiler-sfc": "^3.0.0",
        more ...
    }

babel.config.js

module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins: ['syntax-dynamic-import'],
};

vue.config.js code

const localEnv = process.env.NODE_ENV === 'local';
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const prdPrefix = `[name].[chunkhash].${new Date().getTime()}`;
const defaultConfig = {
    configureWebpack: {
        plugins: [
        ],
        resolve: {
            alias: {
                moment: 'moment/src/moment',
            },
        },
        optimization: {
            usedExports: true,
            splitChunks: {
                chunks: 'all',
            },
        },
        performance: {
            hints: false,
        },
    },
    chainWebpack: config => {
        config.plugins.delete('prefetch');
        config.plugins.delete('preload');
    },
};

const prdConfig = {
    ...defaultConfig,
    css: {
        extract: {
            filename: `css/${prdPrefix}.css`,
            chunkFilename: `css/${prdPrefix}.css`,
        },
    },
    configureWebpack: {
        ...defaultConfig.configureWebpack,
        output: {
            filename: `js/${prdPrefix}.js`,
            chunkFilename: `js/${prdPrefix}.js`,
        },
    },
};

const localConfig = {
    ...defaultConfig,
    configureWebpack: {
        ...defaultConfig.configureWebpack,
        plugins: [...defaultConfig.configureWebpack.plugins, new BundleAnalyzerPlugin()],
    },

    devServer: {
        proxy: {
            '/test': {
                target: 'http://test.com/',
                ws: true,
                changeOrigin: true,
            },
        },
    },
};

const config = localEnv ? localConfig : prdConfig;
module.exports = config;

stage

prodcution

093gszye

093gszye1#

当我将node_env更改为prd而不是production时,应用了babel。
我不明白为什么会发生这种情况。

相关问题