Vue - how to apply Babel well depending on the environment? - vue.js

Question

Babel was applied as es5 in the stage environment, but es6 is being used in the production environment.
I think it applies the same webpack build.
Haven't reflected the source_map yet.
In the production environment, it comes out with es6 grammar.
I have no idea where to fix it.
A photo is also attached.
please help me!
env.build_production
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

Answer 1

When I changed node_env to prd instead of production, babel was applied.
I don't understand why this situation happened.