Webpack 5 및 Babel을 사용한 Svelte
코드만 원하면 여기repo가 있습니다.
지도 시간
먼저 폴더를 생성합니다.
mkdir webpack5-svelte
cd webpack5-svelte
npm init --yes
mkdir src public
이제 다음 종속성을 설치합니다.
바벨
이를 통해 최신 자바스크립트를 모든 브라우저가 지원하는 자바스크립트로 변환할 수 있습니다.
npm i @babel/core @babel/preset-env @babel/polyfill babel-loader svelte-loader --save-dev
웹팩
Webpack은 모든 svelte 파일을 javascript 파일로 변환하는 도구입니다.
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader mini-css-extract-plugin file-loader dotenv-webpack --save-dev
날씬한
npm i svelte
구성 파일
그런 다음 src 폴더에 babel 및 webpack 파일을 만듭니다.
touch .babelrc webpack.config.js
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
웹팩.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
// This says to webpack that we are in development mode and write the code in webpack file in different way
mode: 'development',
//Our index file
entry: './src/index.js',
//Where we put the production code
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
//Allows use of modern javascript
{
test: /\.js?$/,
exclude: /node_modules/, //don't test node_modules folder
use: {
loader: 'babel-loader',
},
},
//Allows use of svelte
{
test: /\.svelte$/,
use: {
loader: 'svelte-loader',
},
},
//Allows use of CSS
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
//Allows use of images
{
test: /\.(jpg|jpeg|png|svg)$/,
use: 'file-loader',
},
],
},
//this is what enables users to leave off the extension when importing
resolve: {
extensions: ['.mjs', '.js', '.svelte'],
},
plugins: [
//Allows to create an index.html in our build folder
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
}),
//This gets all our css and put in a unique file
new MiniCssExtractPlugin(),
//take our environment variable in .env file
//And it does a text replace in the resulting bundle for any instances of process.env.
new Dotenv(),
],
////Config for webpack-dev-server module
devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, 'dist'),
hot: true,
},
};
Svelte 앱 만들기
5개의 파일을 생성하겠습니다.
public/index.html는 우리 프로젝트.env dotenv-webpack이 작동하는지 테스트하기 위해 ./src/index.svelte 진입점 ./src/app.svelte 우리의 응용 프로그램 파일 ./src/global.css webpack의 css 구성이 작동하는지 테스트합니다.touch ./public/index.html
touch .env
touch ./src/index.js
touch ./src/App.svelte
touch ./src/global.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--This is the node that svelte is going to take to make the magic-->
<div id="root"></div>
</body>
</html>
.env
foo=bar
index.js
import App from './App.svelte';
import './global.css';
const app = new App({
target: document.getElementById('root'), // entry point in ../public/index.html
});
export default app;
앱.svelte
<script>
let name = 'world';
let envVariable = process.env.foo;
</script>
<style>
h1{
color: tomato
}
</style>
<h1>Hello {name}!</h1>
<p>env variable: {envVariable}</p>
글로벌.css
body{
background-color: #EEEEEE
}
프로젝트 실행
package.json에 다음 스크립트를 추가합니다."scripts": {
"start": "http-server ./dist/ --cors -o -c-1 --proxy",
"build": "webpack --mode production",
"dev": "webpack serve --open chrome"
},
그런 다음 우리는 실행
npm run dev하고 마술을 봅니다. :)그런 다음 필요한 모든 기능을 사용하여 멋진 응용 프로그램을 만들 수 있습니다.
저에게 연락을 원하시면 여기 제 website
Reference
이 문제에 관하여(Webpack 5 및 Babel을 사용한 Svelte), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rogeliosamuel621/svelte-with-webpack-5-and-babel-1b03텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
