spring 프로젝트에 babel 설정하는것 관련해 궁금한게 있습니다.

Question

spring &#43; thymeleaf 프로젝트입니다.IE도 지원해야 해서 es5 코드로 짜고 있었는데 아무래도 불편한 점이 많기도 하고 코드를 불편하게 짜는 것 같아서 알아보니 babel을 활용해 해결할 수 있더군요.(각 페이지별로 여로 각기 다른 기능들의 js 파일로 나누어져 있는데 webpack을 사용하기엔 비 효율적 일 거란 판단에 babel만 사용하려고 시도해 봤어요.) 그래서 babel 쪽 이리저리 세팅 후 테스트를 해봤는데 계속 에러가 나더군요. // .babelrc{ &#34;presets&#34;: [ [ &#34;&#64;babel/preset-env&#34;, { &#34;targets&#34;: { &#34;ie&#34;: &#34;11&#34; }, &#34;ignoreBrowserslistConfig&#34;: true } ] ], &#34;plugins&#34;: [ [ &#34;&#64;babel/plugin-transform-runtime&#34;, { &#34;corejs&#34;: 3 } ] ] } // testUser.js import user from &#34;./info&#34;; console.log(&#34;user&#34;, user); // ./info.jsexport const user &#61; { id:1, name:&#34;hi&#34;, age:24 }; &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; babel 컴파일 후 결과 파일 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;// testUser.js&#34;use strict&#34;; var _interopRequireDefault &#61; require(&#34;&#64;babel/runtime-corejs3/helpers/interopRequireDefault&#34;); var _info &#61; _interopRequireDefault(require(&#34;./info&#34;)); console.log(&#34;user&#34;, _info.default); // ./info.js&#34;use strict&#34;; var _Object$defineProperty &#61; require(&#34;&#64;babel/runtime-corejs3/core-js-stable/object/define-property&#34;); _Object$defineProperty(exports, &#34;__esModule&#34;, { value: true }); exports.user &#61; void 0; var user &#61; { id: 1, name: &#34;hi&#34;, age: 24 }; exports.user &#61; user; &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; 콘솔 에러 화면 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; require 이란 함수는 nodejs쪽에서 쓰는 함수로 알고 있는데 컴파일된 파일에 그대로 require함수가 써지면서에러가 나는거라 생각하고 해결법을 찾아보니 babel polyfill ( Promise, Array Function 등의 문법을 ie 에서도 사용할 수 있도록 해당 함수 추가 해주는것이라고 알고 있습니다. ) 을 사용하면 해결 될 거라 생각했는데 이걸로도잘 안되는것 같았어요. ( 이쪽을 잘 몰라 세팅을 잘 못해서 그럴수도 있어요. ) 그래서 플러그인 중 babel-transform-modules-amd 형식이 requirejs 형식으로 되어 있는거 같아 babel로 컴파일된 파일에 requirejs 라이브러리 추가해서 시도 해봤는데도 잘 안되가지고 도저히 모르겠어서 글 남깁니다. 1. webpack 없이 babel만 사용해서 js 최신 문법 ( import / export, async / await, promise 등 )을 IE 에서도사용할 수 있는 방법은 없을까요?

Dierslair · Answer

스탠드얼론 환경도 지원하긴 하는데 웬만하면 빌드하셔서 사용하셔야 합니다 promise-es6(Promise.finally 없는 브라우저) 나 vue/react 를 사용하시면 필요한 폴리필도 추가로 주입해 주셔야 합니다.브라우저는 'text/babel' 을 해석하지 않고, 대신 바벨이 읽어서 트랜스파일된 text/javascript 를 그 아래에 document.write()로 직접 끼워넣어 해석하는 방식이라 보안검사 하시면 저거 다 걸려서 나중에 골치아파집니다...

노력하는_개발자 · Answer

저도 cdn 방식은 안 좋다고 생각해서 지금도 빌드로 하는 형식으로 해보고 있는데 IE에서도 import / export 등의 문법을 쓰기 위해서는 저기 .babelrc 부분 &#34;presets&#34;부분의 설정에 &#34;stage-3&#34;도 추가해 주면 되는 건가요? // .babelrc{ &#34;presets&#34;: [ [ &#34;&#64;babel/preset-env&#34;, { &#34;targets&#34;: { &#34;ie&#34;: &#34;11&#34; } } ], &#34;stage-3&#34; ], ...대략 이런 느낌으로 추가하면 되나요?

Dierslair · Answer

엄청 예전에 쓴건데 공유해드립니다.// package.json { &#34;name&#34;: &#34;vue-admin&#34;, &#34;version&#34;: &#34;1.0.0&#34;, &#34;description&#34;: &#34;&#34;, &#34;main&#34;: &#34;index.js&#34;, &#34;scripts&#34;: { &#34;watch&#34;: &#34;eslint --fix && webpack --env NODE_ENV&#61;development --watch&#34;, &#34;build&#34;: &#34;eslint --fix && webpack --env NODE_ENV&#61;development&#34;, &#34;build:prod&#34;: &#34;eslint --fix && webpack --env NODE_ENV&#61;production&#34; }, &#34;keywords&#34;: [], &#34;author&#34;: &#34;&#34;, &#34;license&#34;: &#34;ISC&#34;, &#34;devDependencies&#34;: { &#34;&#64;babel/core&#34;: &#34;^7.15.0&#34;, &#34;&#64;babel/preset-env&#34;: &#34;^7.15.0&#34;, &#34;babel-loader&#34;: &#34;^8.2.2&#34;, &#34;core-js&#34;: &#34;^3.16.3&#34;, &#34;eslint&#34;: &#34;^7.31.0&#34;, &#34;eslint-config-standard&#34;: &#34;^16.0.3&#34;, &#34;eslint-plugin-import&#34;: &#34;^2.23.4&#34;, &#34;eslint-plugin-node&#34;: &#34;^11.1.0&#34;, &#34;eslint-plugin-promise&#34;: &#34;^5.1.0&#34;, &#34;webpack&#34;: &#34;^5.51.1&#34;, &#34;webpack-cli&#34;: &#34;^4.8.0&#34; }, &#34;dependencies&#34;: { &#34;bluebird&#34;: &#34;^3.7.2&#34;, &#34;regenerator-runtime&#34;: &#34;^0.13.7&#34; } } // webpack.config.js const path &#61; require('path') const output &#61; '../resources/static/build' module.exports &#61; ({ NODE_ENV }) &#61;> { const config &#61; { mode: NODE_ENV, target: ['web', 'es5'], entry: { app: './src/index.js' }, output: { path: path.resolve(__dirname, output), filename: '[name].js' }, optimization: { splitChunks: { cacheGroups: { vendor: { chunks: 'initial', name: 'vendor', enforce: true } } } }, resolve: { alias: { '~': path.resolve(__dirname, 'src') }, extensions: ['.js'] }, module: { rules: [ { test: /\.js$/, exclude: /[\/]node_modules[\/]/, loader: 'babel-loader' } ] } } if (NODE_ENV &#61;&#61;&#61; 'production') { config.devtool &#61; 'source-map' } return config } // babel.config.js module.exports &#61; { presets: [ ['&#64;babel/preset-env', { targets: [ '> 0.25%', 'not dead', 'ie >&#61; 9' ], debug: false, corejs: 3, shippedProposals: true, useBuiltIns: 'usage' }] ] }

spring 프로젝트에 babel 설정하는것 관련해 궁금한게 있습니다.

3개의 답변

#webpack 목록