Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Configurar el entorno de trabajo

14/26
Recursos

Aportes 17

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

npm i svelte

npm i -D @babel/core @babel/polyfill @babel/preset-env babel-loader html-webpack-plugin svelte-loader webpack webpack-cli webpack-dev-server

Hay que crear el archivo .babelrc e insertarle esto:

{
  "presets": [
    "@babel/preset-env"
  ]
}

Aquí yo recomiendo el curso de webpack para que puedan entender las directivas y el curso sobre gestor de dependencias npm para que sean unos Pros en esta herramienta. 💪😎
🎉Sin olvidar claramente sus respectivas documentaciones:

Dentro del vídeo falto crear el archivo de configuración de babel, recuerden descargarlo en la sección de enlaces

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*','.mjs','.js','.svelte']
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                } 
            },
            {
                test: /\.svelte$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader'
                }
            }
   
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}

Es importante crear el archivo .babelrc con lo siguiente:

{
  "presets": [
    "@babel/preset-env"
  ]
}

Eso me agrada mucho, que se configure un proyecto desde el inicio, así se pone en practica el curso de webpack

Es necesario hacer todo esto con cada proyecto o se puede usar directamente : npx degit svelte/template nombre del proyecto?

Importarte hacer el curso de webpack, será el próximo a tomar.

Para los que vengan a futuro, para no tener errores de compatibilidad y comandos, donde seguro las librerias ya vayan avanzando, actualizandose y/o mutando, mi recomendación para poder seguir el curso igual que el profe, es agregar al package.json las dependencies y devDependencies con las versiones que utiliza el profesor, y correrlas sin instalar de la forma que hace el profe sino así:

  "dependencies": {
    "svelte": "^3.18.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/polyfill": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }

Y luego correr el comando npm install, de esta forma instala las mismas versiones que el profesor a la hora de hacer el curso y debería andar todo correctamente sin tener problemas.

Mucha suerte con el curso 😃

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*', '.mjs', '.js', '.svelte']
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclue: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.svelte$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}```

Al instalar las dependencias no me creó el archivo .babelrc
¿Lo tengo que crear manualmente?

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['*', '.mjs', '.js', '.svelte']
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    })
  ]
} 

Anotado el curso de Webpack!

Importante que si no corre tu codigo o note aparece algun problema con el babel loader o algo similar, primeor crear un archivo .babelrc.

👌

Nunca fue tan sencillo instalar Babel jajaja 😄