es6 での babel の使い方の紹介 (コード例)

この記事では、es6 での babel の使用法 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

polyfill

js には常に互換性の問題があることは誰もが知っていますが、c や java などの他の言語にも互換性の問題があります。互換性の一種は、古いバージョンでの新機能の非互換性ですが、js にはあらゆる種類の奇妙な非互換性があります。これには非常に複雑な歴史的理由がありますが、ここでは詳しく説明しません。以前は、互換性の問題を解決する方法は 1 つだけあり、それはポリフィルでした。たとえば、新しいバージョンのブラウザでは、配列インクルードの新しいメソッドを使用する場合、それを直接使用できます。

ただし、ie10 などの古いブラウザでは、エラーが報告されます。

この場合、メソッドをカスタマイズできます。解決するには:

function includesPolyfill(){
    if(!Array.prototype.includes){
        Array.prototype.includes=function(element){
              for(var i=0; i<this.length><img src="https://img.php.cn//upload/image/781/626/486/1543218482865515.png" title="1543218482865515.png" alt="es6 での babel の使い方の紹介 (コード例)"> ここで簡単なメソッドを定義し、それを Array.prototype に追加します。簡単にするために、上記のメソッドをコードに導入して、最初に実行します。このメソッドと互換性のない JS 環境では、Array.protorype.includes メソッドが常に直接呼び出されます。 </this.length>

これは Polyfill ですが、古いメソッドを使用して実装できる新しい機能については、Polyfill を使用して解決できます。ただし、一部の新しい機能については、 arrows などの古いメソッドを使用して実装できない新しい構文 関数、const などの場合、現時点では、ポリフィルは、プリコンパイルまたは構文変換という別のメソッドを使用する必要があります。

プリコンパイル

以前のjs開発ではプリコンパイルの処理はなく、js完成後に直接デプロイしていました。時が経つにつれて、特にタイプスクリプトなどの言語の出現後は、プリコンパイルも登場し、コーディングと出版はもはや同じ方法ではなくなりました。

公開する前に、必ずパッケージ化する必要があります。パッケージ化には、リソースの統合、コードの最適化、圧縮、難読化などの多くのプロセスが含まれます...そして、コードの操作では、新しい構文を使用できます。新しい構文をサポートするには、古い構文に変換します。

簡単に言うと、新しい構文 -> コンパイラ -> 古い構文です。

コンパイラの機能は、入力されたソースコードの新機能を構文に変換することです。端的に言えば、var add=(num1, num2) のようなアロー関数の処理などの文字列処理です。 )=>num1 num2 、このコードは ie10

などのアロー関数と互換性のない環境では実行できません。 ただし、構文変換とコンパイル処理により、ソースコードは var add=function(num1, num2){return num1 num2} に変換され、アロー関数をサポートしていないブラウザでも実行できるようになります

次に、単純なコンパイラを実装しましょう。これはもちろんアロー関数のみをサポートします。

function translate(src){
    let [_, name, args, body]=src.match(/\((.+)\)=>(.+)/)
    return `function ${name}(${args}){return ${body}}`
}

簡単にするために、実験には単純な通常の抽出を使用するだけです。例外処理は行いません

translate('var add=(num1, num2)=>num1+num')
//  var add=function(num1, num2){return num1+num2}

変換結果をファイルに保存すると、アロー構文と互換性のない環境でも使用できます。このコンパイラをブラウザに埋め込み、ソース コードをコンパイルし、Function コンストラクタまたは eval を使用してそれを実行し、新しい構文を実装することもできます。この場合、これはランタイム コンパイラと呼ばれますが、もちろん、一般的にはこのように使用されません。これ。 。

babel の使用

明らかに、このようなコンパイラを自分で書くのは不可能ですが、それでもプロジェクトを実行したいですか?現時点では、コミュニティの力に頼るしかありません。次に、babel を使用してアロー関数を解析します。

プロジェクトを初期化します。

$ mk babel-demo 
$ cd babel-demo
$ npm init -y

babel をインストールします。 :

注: (babel7 以降、babel 関連のライブラリは基本的に @babel 名前空間の下に配置されます)

$ npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-arrow-functions

@babel/core: コア ライブラリ

@babel/cli: コマンド ラインtools

@babel/plugin-transform-arrow-functions: アロー関数構文変換プラグイン

コードの記述:

var add=(num1, num2)=>num1+num2

babel

を使用して、 parse

$ npx babel --plugins @babel/plugin-transform-arrow-functions index.js -o bundle.js

上記のコマンドは、babel を使用してindex.js を変換し、その結果をbundle.js に入れることを意味します。実行後、bundle

--plugins: これに対するプラグインのサポートを追加します。変換

-o: 出力ファイル

查看转化结果
查看新生成的bundle.js，可以发现，箭头函数被转化成了普通的funciton， 在任何环境中都支持。

var add = function (num1, num2) {
  return num1 + num2;
};

说明

所以，对于新特性，我们可以通过使用polyfill，也可以通过语法转化来达到兼容。

babel配置文件

很明显，使用babel cli的局限性很大，容易出错、不直观、繁琐等，所以babel还是支持配置文件的方式：

.babelrc方式

在项目新建.babelrc文件，并使用JSON语法配置

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

直接写在package.json的babel节点

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

<span style="font-family: 微软雅黑, Microsoft YaHei;">babel.config.js方式</span>

module.exports = function () {
  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

两种方式大同小异，区别就是一个是动态的，一个是静态的，推荐小项目就用.babelrc，大项目就使用babel.config.js

babel配置之plugin

plugin是babel中很重要的概念，可以说，plugin才是构成babel扩展性的核心，各种各样的plugin构成了babel的生态，可以在这里看一些babel的插件列表。

.babelrc配置文件中配置插件

{
    "plugins": ["@babel/plugin-transform-arrow-functions"]
}

这时候我们再执行npx babel  index.js -o bundle.js，就可以不指定plugin也能正常转化箭头函数了
如果一个plugin可以配置参数，则可以这么配置：

{
  "plugins": [
    ["@babel/plugin-transform-arrow-functions", { "spec": true }]
  ]
}

babel配置之preset

在一个项目中，我们总是要配置一大堆的插件，这个时候，就是preset出马的时候了，那什么是preset呢？其实就是预置插件列表了，引入了一个preset就包含了一个系列的plugin
比如preset-react就包含了以下插件：

@babel/plugin-syntax-jsx

@babel/plugin-transform-react-jsx

@babel/plugin-transform-react-display-name

.babelrc配置preset-react

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

如果有配置项，就酱：

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement
        "pragmaFrag": "DomFrag", // default is React.Fragment
        "throwIfNamespace": false // defaults to true
      }
    ]
  ]
}

babel和webpack

添加webpack.config.js

const path=requrie('path')
module.exports={
    entry:path.resolve(__dirname, 'index.js'),
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
          { test: /\.js$/, use: 'babel-loader' }
        ]
      }

- 添加相关依赖

$ npm install --save-dev webpack webpack-cli babel-loader
"
- `webpack`：`webpack`核心库
- `webpack-cli`：`webpack`命令行工具
- `babel-loader`：`babel`的`webpack loader`

打包

$ npm webpack

查看编译结果
省略无关的东西，可以看到，箭头函数也被转化成了function

/***/ "./index.js":
/*!******************!*\
  !*** ./index.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("let add = function (num1, num2) {\n  return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?");

/***/ })

/******/ });

支持es6

支持es6可以使用@babel/present-env来代替一系列的东西，还有许多的配置像，比如兼容的浏览器版本，具体可以看这里

安装依赖包

$ npm install --save-dev @babel/preset-env

配置

{
    "plugins": ["@babel/present-env"]
}

打包

$ npm webpack

查看效果

/***/ "./index.js":
/*!******************!*\
  !*** ./index.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("let add = function (num1, num2) {\n  return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?");

/***/ })

/******/ });

总结

这只是babel功能的一个小览，了解一下babel的基本使用和一些概念而已。

以上がes6 での babel の使い方の紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。