简介

webpack 编译 ES 和 TS 学习笔记。

编译 ES 6/7

插件安装

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

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

presets规范

es2015
es2016
es2017
babel-preset-stage 0-3
env
babel-preset-react

presets规范

函数和方法：Generator、Set、Map、Array.from、Array.prototype.includes

使用的原因：presets 针对的是语法的规范，但是在低级浏览器，对于函数和方法没有相应的转换

全局垫片

# 安装: 为应用准备
npm install babel-polyfill --save

# 使用
import 'babel-polyfill'

局部垫片

# 安装: 为开发框架准备
npm install @babel/plugin-transform-runtime --save-dev

webpack 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader?cacheDirectory=true',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
              ],
              plugins: [
                '@babel/plugin-transform-runtime',
                '@babel/plugin-syntax-dynamic-import',
              ],
            },
          },
        ],
      },
    ]
  },
};

编译JS

插件安装

# ts-loader
npm i typescipt ts-loader --save-dev

# ts-node
npm i typescipt ts-node --save-dev

安装申明文件

# 法一
npm install @types/lodash --save
npm install @types/vue --save

# 法二
npm install typings -g
typings install lodash --save

安装申明文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|jsx?)$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader?cacheDirectory=true',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
              ],
              plugins: [
                '@babel/plugin-transform-runtime',
                '@babel/plugin-syntax-dynamic-import',
              ],
            },
          },
          {
            loader: 'ts-loader',
          },
        ],
      },
    ]
  },
};

项目地址

地址: https://github.com/yunaichun/webpack-study

参考资料

results matching ""

No results matching ""