新しいwebpack環境でES 6構文をES 5構文に変換する手順を1回覚えます.

最近やっているプロジェクトは、3 Dの一部の機能にかかわるため、会社でこの方面の経験がない人のため、同じプロジェクトが急いでいます.リーダーはこの業務を1つの会社にアウトソーシングした.
この機能はthree.jsで作られており、当社のプロジェクトではiframeで導入されています.だから自分のプロジェクトのwebpackもこの部分を圧縮してトランスコードしていません.
オンラインにしようとしたとき、突然甲の会社の流覧機が3 Dを開けられないことに気づいた.ルートエラーと3 Dのビジネスコードがbabel変換されていないことが判明しました.
多くの種類にわたる属書き方は旧版chromeに支持されていない.

class Example {
    aProp = { x: 100 }
    constructor(){ ... }
}

この部分の业务はすでに署名したため、利益の问题を考虑して、本BUGの制作者がこの锅を受け取るしかありません.

スタート

げんり

3 D部分コードにはhtmlファイルが1つずつ入っており、htmlファイルには他のjsファイルが参照されています.簡単な方法は、webpackでエントリのjsファイルからパッケージ化と変換を開始し、最後にjsを1つだけ生成し、このjsを対応するhtmlファイルに参照することです.

Webpack環境構築

3 D関連コードをコピーしてフォルダに保存

//    
npm init -y

//     
yarn add webpack webpack-cli --save-dev

ディレクトリ構造は次のとおりです.

 webpack-3d
  |- package.json
+ |- /src
+   |- index.js
+   |- index.html
+   |- xxx.js
+   |- xxx.js
+ ｜- webpack.config.js

ここで、index.jsはindex.htmlのエントリファイルであり、各xxx.jsは対応するインポート依存である.webpack.config.jsはwebpackのプロファイルであり、この量でエントリと出力ファイルと対応するloaderを設定する

const path = require('path')

module.exports = {
  //      none,         
  mode: 'none',
  entry: {
    index: './src/index.js', //    html     
    customs: './src/customs.js'    //    html     
  },
  output: {
    filename: '[name].[chunkhash].js', //      ，    16 hash
    path: path.resolve(__dirname, 'dist') //       
  },
  module: {
    //      ，  babel   
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
    ]
  }
}

必要なloaderを押して

// babel            

yarn add @babel/[email protected] @babel/[email protected] babel-loader -D

また、ES 6のclass関連メソッドが使用されているため、@babel/plugin-proposal-class-propertiesをインストールする必要があります.

yarn add @babel/plugin-proposal-class-properties -D

プロジェクトとディレクトリの下に.babelrcファイルを新規作成
次の内容を書き込みます.

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "browsers": [
            "last 2 versions",
            "not ie <= 9"
          ]
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

最後に端末で実行

npx webpack

entryの中の各エントリファイルを相応にトランスコードして1つのjsファイルにパッケージすることができて、相応のhtmlファイルで導入すればいいです

2020-06-17更新htmlファイルへの自動導入機能

パッケージされたjsファイルをhtmlに自動的に参照するのも簡単で、プラグインが1つだけでいいです.html-webpack-plugin

yarn add --dev html-webpack-plugin

プレゼンテーションを容易にするためにwebpack.config.jsファイルで直接変更

// webpack.config.js        js
module.exports = {
  entry: {
    index: './src/index.js', //    js
    customs: './src/customs.js'    //    js
  },
...

html-webpack-pluginの新規pluginsプロパティの導入

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

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './static/customs-3d-son/index.html',
            chunks: ['index'],
            minify: {
                removeComments: false,
                collapseWhitespace: false,
                removeAttributeQuotes: false,
                minifyJS: false,
                minifyCSS: false
            },
            chunksSortMode: 'auto'
        }),
        //       plugin,      ，            。
        new HtmlWebpackPlugin({
            filename: 'customs.html',
            template: './static/customs-3d-son/customs.html',
            chunks: ['customs'],
            minify: {
                removeComments: false,
                collapseWhitespace: false,
                removeAttributeQuotes: false,
                minifyJS: false,
                minifyCSS: false
            },
            chunksSortMode: 'auto'
        })
    ]
}

大功を成し遂げる