Webpack4 打包js ES6转ES5 babel7.X


Webpack4 打包jsES6ES5,使用babel7.x

注意点,使用babel时得注意版本对应的问题,babel-loaderbabel-core版本对应关系:

babel-loader 8.x对应babel-core 7.x

babel-loader 7.x对应babel-core 6.x

 

一、babel 7.x安装

npm i -D @babel/core

cnpm i -D @babel/core

 

二、安装babel-preset

npm i @babel/preset-react

npm i @babel/preset-env

npm i babel-preset-mobx

cnpm i @babel/preset-react

cnpm i @babel/preset-env

cnpm i babel-preset-mobx

三、安装babel-plugin

npm install --save-dev @babel/plugin-proposal-object-rest-spread

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

cnpm install --save-dev @babel/plugin-proposal-object-rest-spread

cnpm install --save-dev @babel/plugin-transform-runtime

cnpm install --save @babel/runtime

 

四、修改.babelrc文件

如果没有这个文件,则在package.json同及目录创建一个.babelrc文件。

然后其内容修改如下:

{

    "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],

    "plugins": [

        "@babel/plugin-proposal-object-rest-spread",

        "@babel/plugin-transform-runtime"

    ]

}

五、修改webpack.config.json内容

module: {

        rules: [

            {

                test: /\.m?js$/,

                exclude: /(node_modules|bower_components)/,

                use: {

                    loader: 'babel-loader',

                    options: {

                        presets: ['@babel/preset-env']

                    }

                }

            }

        ]

},


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM