Webpack之Javascript的编译

2020-01-13

ES6的编译

ES6语法的编译

需要安装的包

npm install babel-loader @babel/core --save-dev

Presets

如果单纯的babel-loader发现并没有将es6转为es5,这个时候还需要babel-preset;
Presets是存储Javascript不同标准的插件,通过使用正确的Presets,告诉babel按照哪个规范编译;

常见规范
es2015es2016es2017env(通常采用)babel-preset-stage
babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5;


安装Presets

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

效果图
通过配置将es6的箭头函数语法编译为es5的写法
配置:


打包的js

配置项中的target
Target是preset的核心配置,告诉preset编译的具体目标。
Target可以:
1、以browsers为目标(通常情况);
2、以node版本为目标;
3、以特定的浏览器为目标;

打包的js

babel-presets只能够编译语法,对于es6的一些新方法是无能为力的

ES6方法的编译

babel-polyfill

安装包

npm install babel-polyfill --save-dev

原理
生成一个全局对象,用es5实现所有的es6方法,然后挂在全局对象下
场景
一般用于项目开发
使用
在入口文件引入即可




也可以在配置文件中引入

babel-transform-runtime

原理
在app.js中生成一个局部作用域,然后只对app.js中使用到的es6方法用es5重写,这样不会特别增大文件的体积
场景
会用在框架开发
使用
作为babel的插件只能够写在babel的options中;
babel的options越写越多,不美观,所以我们单独抽取一个文件来,因此.babelrc文件诞生






//其实就是options:{}里面的内容
 {   
    "presets":[
        ["@babel/preset-env",{
            "targets":{

                //全球市场率大于1%的浏览器作为目标
                "browsers":[">1%"]
                //如果以node 10为目标,是支持es6的语法的,就不会编译为es5了
                // node:'10',
                //chrome59 是支持es6的语法的,就不会编译为es5了
                // chrome:'59'
            }
        }]
    ],
    "plugins":[
        ["@babel/transform-runtime"]
    ]
}

编译语法糖

比如ts编译

Typescript是Javascript的一个超集,让我们可以用强类型的写法写Javascript,与之类似的有jsx,vue等
1、安装loader(安装typescript和ts-loader);

cnpm i typescript ts-loader --D

2、写入配置文件(在wepack.config.js中写入ts-loader);

module.exports = {
    // entry:'./app.js',
    // entry:['./app.js','./app2.js'],
    //这个比较常用
    entry:{
        app:'./index.js',
        // app:['babel-polyfill','./index.js'],
        // app2:'./app2.js'
    },
    output:{
        //path是一个绝对路径,如果没有path,则path默认为__dirname+dist
        // path:__dirname+'/src/bundle',
        // filename:'bundle.js'
        //name为entry中的指向key值,hash为默认随机字符串,hash:4为截取前4个
        filename:'[name].[hash:4].js'//app.hkgd.js
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude:'/node_modules/',
                //use 是使用哪个loader来处理对应的文件
                use:{
                    loader:'babel-loader',                                     
                }
            } ,
            {
                test:/\.tsx?$/,          
                use:'ts-loader',              
            }          
        ]
    },
    plugins:[
        // new webpack.DefinePlugin({
        //     'process.env':require('../config/dev.env')
        // }),
        // new webpack.HotModuleReplacementPlugin()
    ]
}

3、编写tsconfig.json(类似于.babelrc,ts-loader的额外配置);

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5"
    },
    "exclude": ["./node_modules/"]
}

一些常见的javascript语法糖编译

1、安装对应的loader 比如vue-loader和Jsx-loader;
2、写入配置文件(在webpack.config.js中写入对应的loader处理);
3、根据loader规则写配置(可在loader的npm或github上查询);









原文链接:juejin.im

上一篇:详细的 webpack4 多入口配置
下一篇:vue从零搭建一个前中后台权限管理模板
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部