Webpack.config.js dosyasında ES6'yı nasıl kullanabilirim?

Webpack.config dosyasında ES6 nasıl kullanılır? Bu repo gibi https://github.com/kriasoft/react-starter-kit yapar mı?

Örneğin:

bunu kullanarak

import webpack from 'webpack';

onun yerine

var webpack = require('webpack');

Bu bir ihtiyaçtan ziyade bir meraktır.

Yapılandırmanızı olarak adlandırmayı deneyin webpack.config.babel.js. Sen olmalıdır babel-register projesine dahil. Örnek olarak reaksiyona-yönlendirici-ön yükleme .

Webpack , bu işi yapmak için dahili olarak yoruma dayanır .

@Bebraw'ın önerdiklerine alternatif olarak, ES6 + sözdizimi ile bir JavaScript otomasyon komut dosyası oluşturabilirsiniz:

// tools/bundle.js

import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+

const bundler = webpack(webpackConfig);

bundler.run(...);

Ve babil ile çalıştırın:

$ babel-node tools/bundle

Not : Web paketini JavaScript API'sı ile çağırmak, daha karmaşık oluşturma adımları uygulamanız gerektiğinde (komut satırı aracılığıyla çağırmaktan daha iyi) bir yaklaşım olabilir. Örneğin, sunucu tarafı paketi hazır olduktan sonra, Node.js uygulama sunucusunu başlatın ve Node.js sunucusu başlatıldıktan hemen sonra BrowserSync dev sunucusunu başlatın.

Ayrıca bakınız:

• Tepki Başlangıç Kiti ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• React Statik Demirbaş ( run.js, webpack.config.js, node run)
• Gulp.js'ye ihtiyacınız olmayabilir

: Diğer bir yaklaşım, böyle bir npm senaryoyu sahip olmaktır "webpack": "babel-node ./node_modules/webpack/bin/webpack"ve bu yüzden gibi çalıştırın: npm run webpack.

@ Juho'nun çözümünü Webpack 2 ile çalışırken bir sorunla karşılaştım. Webpack geçiş belgeleri babel modül ayrıştırma işlemini kapatmanızı önerir:

Babel'in bu modül sembollerini ayrıştırmamasını, web paketinin bunları kullanabilmesi için söylemek isteyeceğinizi belirtmek önemlidir. Bunu .babelrc veya babel loader seçeneklerinizde ayarlayarak yapabilirsiniz.

.babelrc:

{
    "presets": [
         ["es2015", { "modules": false }]
    ]
}

Ne yazık ki, bu otomatik babil kayıt işlevselliği ile çakışıyor. Çıkarma

{ "modules": false }

babel config'ten bir şeyler tekrar çalışıyor. Bununla birlikte, bu, ağaç sallamaya neden olur, bu nedenle tam bir çözüm , yükleyici seçeneklerindeki ön ayarların üzerine yazılmasını içerir :

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

Edit , 13 Kasım 2017; webpack yapılandırma snippet'ini Webpack 3'e güncelledi (@ x-yuri sayesinde). Eski, Webpack 2 snippet'i:

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},

Bu gerçekten kolay, ama cevapların hiçbirinden benim için açık değildi, bu yüzden başka biri benim gibi karıştırılırsa:

.babelUzantıdan önce dosya adınızın bir bölümüne ekleyin ( babel-registerbağımlılık olarak yüklediğinizi varsayarak ).

Misal:

mv webpack.config.js webpack.config.babel.js

Webpack 4'ü kullanarak işime yarayan buydu:

İçinde package.json:

"scripts": {
    "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},

"devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/register": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},

"babel": {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

Her bağımlılığın nasıl kullanıldığını açıkça görebilirsiniz, bu yüzden orada sürpriz yok.

Not webpack-serve--require kullanıyorum , ancak webpackbunun yerine komutu kullanmak istiyorsanız , onunla değiştirin webpack --config-register. Her iki durumda da, @babel/registerbu işi yapmak için gereklidir.

Ve bu kadar!

yarn dev

Ve es6yapılandırmada kullanabilirsiniz !

İçin webpack-dev-server, komutla --config-registeraynı seçeneği kullanın.webpack

NOT:

Yapılandırma dosyasını webpack.config.babel.js(kabul edilen cevapta önerildiği gibi) olarak yeniden adlandırmanız gerekmez . webpack.config.jsgayet iyi çalışacak.

Bir başka yol da düğüm için gereksinim argümanı kullanmaktır:

node -r babel-register ./node_modules/webpack/bin/webpack

Bu şekilde elektron reaksiyonu-kazan plakasında buldum , bakın build-mainve build-renderersenaryolar.

Babel 7 ve Webpack 4 için yapılandırma

package.json

    ...
    "scripts": {
        "start": "webpack-dev-server --env.dev",
        "build": "webpack --env.prod",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.0.0",
        "babel-loader": "^8.0.0",
        ...
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0",
        "webpack-config-utils": "^2.3.1",
        "webpack-dev-server": "^3.1.8"

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

webpack.config.babel.js

import webpack from 'webpack';
import { resolve } from 'path';

import { getIfUtils, removeEmpty } from 'webpack-config-utils';

export default env => {
    const { ifProd, ifNotProd } = getIfUtils(env);

    return {
        mode: ifProd('production', 'development'),
        devtool: ifNotProd('cheap-module-source-map'),
        output: {
            path: resolve(__dirname, ifProd('prod', 'dev')),
            filename: 'bundle.js'
        },

Rename webpack.config.jsiçin webpack.config.babel.js.

Sonra .babelrc içinde: {"presets": ["es2015"]}

Ancak, babel-cli için farklı bir babel yapılandırması kullanmak istiyorsanız, .babelrc'niz aşağıdaki gibi görünebilir:

{
  "env": {
    "babel-cli": {
      "presets": [["es2015", {"modules": false}]]
    },
    "production": {
      "presets": ["es2015"]
    },
    "development": {
      "presets": ["es2015"]
    }
  }
}

Ve package.json içinde:

{
  "scripts": {
    "babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
    "build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
    ...
  },
  ...
}

Aptal ama {"modules": false}farklı envs kullanmazsanız web paketini kıracak.

.Babelrc hakkında daha fazla bilgi için resmi dokümanlara bakın .

For typescript : düz dan https://webpack.js.org/configuration/configuration-languages/

npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server

sonra, örneğin webpack.config.ts

import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

export default config;

Commonjs'i hedeflemiyorsanız (ts-node bağlı olduğundan bunun çalışması için bir req), sadece webpack yapılandırması için ayrı bir tsconfig dosyasına sahip bir eklenti kullanabileceğiniz daha fazla ayrıntı için bağlantıyı kontrol edin.

Yorum yapmak için yeterli temsilciniz yok, ancak herhangi bir TypeScript kullanıcısı için yukarıdaki @Sandrik'e benzer bir çözüm eklemek istedim

ES6 sözdizimi içeren webpack yapılandırmalarına (JS dosyaları) işaret ettiğim iki komut dosyası var.

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"

ve

"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"

En iyi yaklaşım npm betiği ile birlikte

node -r babel-register ./node_modules/webpack/bin/webpack

ve Babel gereksiniminize göre diğer komut dosyalarını yapılandırın

Tonlarca belgeden sonra ...

1. Sadece es2015 hazır ayarını yükleyin (env değil!) Ve

   .babelrc:
   {
       "presets": [
            ["es2015", { "modules": false }]
       ]
   }
   

2. Adınızı webpack.config.jsolarak yeniden adlandırınwebpack.config.babel.js

Webpack 4 ve Babel 7'yi kullanma

ES2015 kullanmak üzere bir web paketi yapılandırma dosyası kurmak için Babel gerekir:

Dev bağımlılıklarını yükleyin:

npm i -D  webpack \
          webpack-cli \
          webpack-dev-server \
          @babel/core \
          @babel/register \
          @babel/preset-env
npm i -D  html-webpack-plugin

Bir .babelrcdosya oluşturun :

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

Webpack yapılandırmanızı oluşturun webpack.config.babel.js:

import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config = {
  mode: 'development',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    })
  ],
  resolve: {
    modules: [_resolve(__dirname, './src'), 'node_modules']
  }
};

export default config;

Komut dosyalarınızı şu konumda oluşturun package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

Koş npm run buildve npm start.

Webpack yapılandırması aşağıdaki dizin yapısına sahip örnek bir projeye dayanmaktadır:

├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── Greeter.js
│   ├── index.html
│   └── index.js
└── webpack.config.babel.js

Örnek proje: Babil Kullanarak Webpack Yapılandırma Dili

Web paketine es6 eklemek 3 adımlı bir işlemdir

1. In webpack.config.js eklenti

   module:{
   
             rules:[
               {
                 test: /\.js$/,
                 loader: 'babel-loader'
               }
             ]
          }
   

   2. Bir .babel.rc dosyası oluşturun ve içine ekleyin

{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}

3. in package.json ekle

npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
npm install babel-loader --save-dev

Yapamazsın. Sen ile ya CommonJS dönüştürmek zorunda babelya esm.

https://github.com/webpack/webpack-cli/issues/282

Ama koşabilirsin webpack -r esm @babel/register