ฉันจะใช้ ES6 ใน webpack.config.js ได้อย่างไร

วิธีการใช้ ES6 ใน webpack.config ชอบ repo นี้ https://github.com/kriasoft/react-starter-kit ทำอะไร

ตัวอย่างเช่น

ใช้สิ่งนี้

import webpack from 'webpack';

แทน

var webpack = require('webpack');

มันค่อนข้างอยากรู้อยากเห็นมากกว่าความต้องการ

webpack.config.babel.jsลองตั้งชื่อการตั้งค่าของคุณเป็น คุณควรให้babel-registerรวมอยู่ในโครงการ ตัวอย่างที่ตอบสนอง-เตอร์บูต

Webpack อาศัยการตีความจากภายในเพื่อทำให้งานนี้สำเร็จ

เป็นทางเลือกแทนสิ่งที่ @bebraw แนะนำคุณสามารถสร้างสคริปต์การทำให้เป็นอัตโนมัติ JavaScript ด้วยไวยากรณ์ ES6 +:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

และดำเนินการกับ Babel:

$ babel-node tools/bundle

PS : การเรียก webpack ผ่าน JavaScript API อาจเป็นวิธีที่ดีกว่า (โดยเรียกผ่านทางบรรทัดคำสั่ง) เมื่อคุณต้องการใช้ขั้นตอนการสร้างที่ซับซ้อนมากขึ้น เช่นหลังจากบันเดิลฝั่งเซิร์ฟเวอร์พร้อมแล้วแอปเซิร์ฟเวอร์ Node.js เริ่มต้นและหลังจากเซิร์ฟเวอร์ Node.js เริ่มทำงานแล้วให้เปิดใช้เซิร์ฟเวอร์ BrowserSync

ดูสิ่งนี้ด้วย:

• ตอบสนอง Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• ตอบสนองคง Boilerplate ( run.js, webpack.config.js, node run)
• คุณอาจไม่ต้องการ Gulp.js

อีกวิธีหนึ่งคือการมีสคริปต์ NPM เช่นนี้: และใช้มันเพื่อต้องการ:"webpack": "babel-node ./node_modules/webpack/bin/webpack"npm run webpack

ฉันมีปัญหาในการรับโซลูชันของ @ Juho ที่ทำงานกับ Webpack 2 เอกสารการโยกย้าย Webpackแนะนำให้คุณเปลี่ยนโมดูลการแยก babel:

โปรดทราบว่าคุณจะต้องบอกให้ Babel ไม่แยกสัญลักษณ์โมดูลเหล่านี้เพื่อให้ webpack สามารถใช้งานได้ คุณสามารถทำได้โดยการตั้งค่าต่อไปนี้ในตัวเลือก. babelrc หรือ babel-loader

.babelrc:

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

น่าเศร้าที่สิ่งนี้ขัดแย้งกับฟังก์ชันการลงทะเบียน Babel อัตโนมัติ การถอด

{ "modules": false }

จากการตั้งค่า Babel ทำให้สิ่งต่าง ๆ ทำงานอีกครั้ง อย่างไรก็ตามสิ่งนี้จะส่งผลให้เกิดการเขย่าต้นไม้ดังนั้นโซลูชันที่สมบูรณ์จะเกี่ยวข้องกับการเขียนทับค่าที่ตั้งไว้ล่วงหน้าในตัวเลือกโหลดเดอร์ :

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

แก้ไข , 13 พฤศจิกายน 2017; อัปเดตตัวอย่าง webpack config เป็น Webpack 3 (ขอบคุณ @ x-yuri) เก่าตัวอย่างของ Webpack 2:

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

มันง่ายจริง ๆ แต่ก็ไม่เห็นชัดเจนสำหรับฉันจากคำตอบใด ๆ ดังนั้นหากมีคนอื่นสับสนเช่นฉัน:

เพียงต่อท้าย.babelส่วนของชื่อไฟล์ของคุณก่อนส่วนขยาย (สมมติว่าคุณได้babel-registerติดตั้งเป็นการอ้างอิง)

ตัวอย่าง:

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

นี่คือสิ่งที่ฉันใช้งาน webpack 4:

ใน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"
  ]
}

คุณสามารถเห็นได้อย่างชัดเจนว่ามีการใช้การอ้างอิงแต่ละรายการอย่างไรจึงไม่แปลกใจที่นั่น

หมายเหตุผมใช้webpack-serve--requireแต่ถ้าคุณต้องการที่จะใช้คำสั่งแทนแทนที่ด้วยwebpack webpack --config-registerไม่ว่าในกรณีใด@babel/registerก็จำเป็นต้องทำให้งานนี้สำเร็จ

และนั่นมัน!

yarn dev

และคุณสามารถใช้es6ในการกำหนดค่า!

สำหรับwebpack-dev-serverใช้--config-registerตัวเลือกที่เหมือนกันกับwebpackคำสั่ง

บันทึก:

ไม่จำเป็นต้องเปลี่ยนชื่อไฟล์กำหนดค่าwebpack.config.babel.jsเป็น (ตามคำแนะนำที่ได้รับการยอมรับ) webpack.config.jsจะทำงานได้ดี

อีกวิธีหนึ่งคือการใช้ต้องการอาร์กิวเมนต์สำหรับโหนด:

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

ค้นพบวิธีนี้ในแผ่นอิเล็คตรอนแบบโต้ตอบปฏิกิริยาดูbuild-mainและbuild-rendererสคริปต์

การกำหนดค่าสำหรับBabel 7 & Webpack 4

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'
        },

เปลี่ยนชื่อไปwebpack.config.jswebpack.config.babel.js

จากนั้นใน .abelrc: {"presets": ["es2015"]}

อย่างไรก็ตามหากคุณต้องการใช้ babel config อื่นสำหรับ babel-cli .babelrc ของคุณอาจมีลักษณะดังนี้:

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

และใน package.json:

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

มันโง่ แต่{"modules": false}จะทำลาย webpack ถ้าคุณไม่ใช้ envs ที่แตกต่างกัน

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ .babelrc ตรวจสอบเอกสารที่เป็นทางการ

สำหรับTypeScript : ส่งตรงจาก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

จากนั้นดำเนินการเขียนเช่น: 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;

ตรวจสอบลิงก์เพื่อดูรายละเอียดเพิ่มเติมที่คุณสามารถใช้ปลั๊กอินเพื่อให้มีไฟล์ tsconfig แยกต่างหากสำหรับการกำหนดค่า webpack หากคุณไม่ได้กำหนดเป้าหมาย commonjs (ซึ่งเป็นสิ่งที่ต้องใช้เพื่อให้สามารถทำงานได้เนื่องจากอาศัย ts-node)

มีตัวแทนไม่เพียงพอที่จะแสดงความคิดเห็น แต่ฉันต้องการเพิ่มสำหรับผู้ใช้ TypeScript ที่มีโซลูชันที่คล้ายกับ @Sandrik ด้านบน

ฉันมีสองสคริปต์ที่ฉันใช้ชี้ไปที่ webpack configs (ไฟล์ JS) ที่มีไวยากรณ์ ES6

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

และ

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

แนวทางที่ดีที่สุดของฉันพร้อมกับสคริปต์ npm คือ

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

และกำหนดค่าสคริปต์ที่เหลือตามความต้องการของคุณสำหรับBabel

หลังจากเอกสารมากมาย ...

1. เพียงติดตั้ง es2015 ที่ตั้งไว้ล่วงหน้า (ไม่ใช่ env !!!) และเพิ่มลงใน

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

2. เปลี่ยนชื่อwebpack.config.jsเป็นwebpack.config.babel.js

ใช้ Webpack 4 และ Babel 7

ในการตั้งค่าไฟล์กำหนดค่า webpack เพื่อใช้ ES2015 ต้องใช้ Babel:

ติดตั้งการอ้างอิง dev:

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

สร้าง.babelrcไฟล์:

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

สร้างการกำหนดค่า webpack ของคุณ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;

สร้างสคริปต์ของคุณในpackage.json:

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

เรียกใช้npm run buildและnpm startและ

การกำหนดค่า webpack ขึ้นอยู่กับโครงการตัวอย่างที่มีโครงสร้างไดเรกทอรีต่อไปนี้:

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

โครงการตัวอย่าง: ภาษาการกำหนดค่า Webpack โดยใช้ Babel

การเพิ่ม es6 ไปยัง webpack เป็นกระบวนการ 3 ขั้นตอน

1. ในwebpack.config.jsเพิ่ม

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

   2. สร้าง. babel.rcและเพิ่มเข้าไปข้างใน

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

3. ในpackage.jsonเพิ่ม

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

คุณทำไม่ได้ คุณต้องแปลงเป็น CommonJS ไม่ว่าจะด้วยbabelหรือesmหรือ

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

แต่คุณสามารถวิ่งได้ webpack -r esm @babel/register