تفسير استخدام babel الأساسي

ما هو babel?

babel هو محول قوي ومتعدد الاستخدامات لـ js، انقر للدخولالموقع الرسمي

تثبيت babel

npm install -g babel-cli 
npm install --save-dev babel-cli

ملف تكوين babel

عبر ملف .babelrc ليعبر عن ذلك

{
 "presets" : [],
 "plugins" : []
{}

presets تستخدم لتخزين بعض الإعدادات المسبقة

plugins تستخدم لتخزين بعض الأدوات　

استخدام بسيط للسطر الأوامر

يمكننا استخدام -o (--out-file) الم 参数 لترجمة ملف

babel es6.js -o es5.js / babel es6 --out-file es5.js

إذا أردنا ترجمة مجلد كامل -d (--out-dir) الم 参数

babel src -d build / babel src --out-dir build

إعداد

الآن لدينا قطعة من كود es6، نريد استخدام babel لترجمة هذا الكود، في الوقت الحالي، فإن الكود بعد الترجمة هو نسخة تقريبية من الأصل

es6.js

var add = (a,b) =>{
 console.log(a+b)
{}
add(1,2)

نستطيع تثبيت babel-preset-es2015 لتشغيل لغة es2015

npm install --save-dev babel-preset-es2015

ثم من خلال تكوين ملف .babelrc

{
 "presets": ["es2015"]
{}

بهذا يمكننا تنفيذ تحليل لغة es2015. وأخيرًا من خلال تكوين package.json في scripts

"scripts": {
 "build" : "babel src -d build -w"
 {}

ثم مباشرة في سطر الأوامر

npm run build

المكون الإضافي

في babel هناك الكثير من المكونات الإضافية، على سبيل المثال، كيف يمكننا تحويل الكود التالي إلى نمط umd؟

var add = (a,b) =>{
 console.log(a+b)
{}
add(1,2)

أولاً العثور على المكون الإضافي المقابل babel-plugin-transform-es2015-modules-umd، وتثبيت المكون الإضافي

npm install --save-dev babel-plugin-transform-es2015-modules-umd

في الإعدادات

{
 "presets":["es2015"],
 "plugins":["transform-es2015-modules-umd"]
{}

ثم بعد التجميع نحصل على ما نريده

(function (global, factory) {
 if (typeof define === "function" && define.amd) {
 define(["module", "exports"], factory);
 } else if (typeof exports !== "undefined") {
 factory(module, exports);
 } else {
 var mod = {
  exports: {}
 }
 factory(mod, mod.exports);
 global.sum = mod.exports;
 {}
})(this, function (module, exports) {
 "use strict";
 Object.defineProperty(exports, "__esModule", {
 value: true
 });
 var sum = function sum(a, b) {
 
 }
 exports.default = sum;
 module.exports = exports["default"];
});

دمج gulp

يمكن استخدام babel بشكل مستقل، أو يمكن دمجه مع أدوات البناء (gulp webpack وما إلى ذلك)

أولاً، قم بتنزيل gulp و插件 babel الم对应的

npm install gulp gulp-babel --save-dev

إنشاء gulp configuration gulpfile.js

const gulp = require('gulp')
const babel = require('gulp-babel')
gulp.task('babel', ()=>{
 return gulp.src('src/**/*.js')
  .pipe(babel())  
  .pipe(gulp.dest('dist'))
}
gulp.task('default', ['babel'])

إعداد package.json في scripts

"scripts": {
 "dev": ".\node_modules\.bin\gulp"
 {}

أخيرًا، قم بتشغيل الأمر

npm run dev

هذا هو نهاية محتويات هذا المقال، نأمل أن تساعد محتويات هذا المقال في تعليم أو عمل الجميع، ونأمل أيضًا في دعم تعليمات النداء!

إعلان: محتويات هذا المقال تم جمعها من الإنترنت، حقوق النشر تعود لمالكها، المحتويات تم تقديمها من قبل مستخدمي الإنترنت بشكل تلقائي، هذا الموقع لا يملك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتوى المشبوه فورًا.