webpack 将ts代码转成es5_ts转ecma5 webpack - CSDN
精华内容
参与话题
  • TypeScript用法介绍、webpack配置ts

    千次阅读 2019-04-02 13:44:04
    JavaScript超集: 当前任何JavaScript都是合法的TypeScript代码! TypeScript主要为JavaScript提供了类型系统和ES6语法的支持! Flow是一个类型检查工具,TypeScript是一种开发语言! TypeScript有自己的编译工具,...

    TypeScript是什么?

    TypeScript是微软公司开发的一款开源的JavaScript超集语言!
    JavaScript超集: 当前任何JavaScript都是合法的TypeScript代码!
    TypeScript主要为JavaScript提供了类型系统和ES6语法的支持!
    Flow是一个类型检查工具,TypeScript是一种开发语言!
    TypeScript有自己的编译工具,我们写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行!angular、vue、react都是支持ts的。

    安装

    TypeScript命令行工具的安装(TS编译器)

    npm i typescript -g
    

    安装好了之后,全局会提供一个tsc命令给我们使用!

    编写TypeScript代码

    通过tsc进行编译,最终运行

    ts配置文件的说明

    1. 创建配置文件
    tsc --init
    
    1. 设置配置项 (tsconfig.json)
      • target: es5 指的就是将ts代码要转换成哪个版本的js代码 es5 es3
      • module: 指的就是将ts代码转换成js代码之后,使用的模块化的标准是什么
      • outDir: 指的就是将ts代码转换成js代码之后,js代码存放的文件夹路径
      • rootDir: 指的就是要将哪个目录中的ts代码进型转换,ts代码的存放路径
      • strict: 是否要将ts代码转换为严格模式的js代码!
      • allowJs: true 允许ts语法中引入js的模块
    2. 使用配置文件
    tsc -p ./tsconfig.json
    
    ts 如何配置webpack 4.0
    yarn add ts-loader -D
    ……
    webpack.config.js 中的配置
    module: {
    	rules: [{
    		test: /\.tsx$/,
    		use: 'ts-loader',
    		exclude: /node_modules/
    	}]
    }
    

    ts的几种类型及用法

    1. ts中类型的介绍

    // number
    let a: number = 10
    let b: number = NaN
    let c: number = Infinity
    let d: number = 0xA12 //16进制
    let e: number = 0b1010101 //2进制
    let f: number = 0o75 //8进制

    //string
    let str1: string = ‘这是一个字符串’ //单、双引号均可
    let str2: string = `这是一个模板字符串${a}` //模板字符串,可以放变量

    //boolean
    let flag1: boolean = true; //false

    //数组
    //Array<数据类型>
    let arr: Array = [1, 2, 3, 4]
    // 数据类型 []
    let arr1: number[] = [1, 2, 3]

    //元组类型(Tuple)
    //该类型 允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。比如定义以下数组
    let arr2: [number, string] = [5, ‘s’]
    arr2[1] = ‘b’
    arr2[0] = 1

    //void 空值 (无返回值)
    let res: void = undefined;

    //undefined
    // null
    let res1: undefined = undefined;
    let res2: null = null;

    //any
    let somevar: any = 10
    somevar = ‘10’
    somevar = undefined

    //never类型
    //永远不可能有返回值的类型设置, 比如死循环
    function n(): never {
    while (true) {}
    }

    //object类型
    let o: object = {}
    let o1: object = []

    //对象类型
    let o2: {name: string, age: number} = {
    name: ‘gc’,
    age: 15
    }

    //enum枚举类型 g= 0/1/-1
    enum gender {
    male,
    female,
    unknow
    }
    let g: gender = gender.male

    //类型断言
    let str4: any = ‘abc’
    // let l: number = str4.length
    let l: number = (<string>str4).length

    1. ts中的类
     class Person {
      names: string  //与es6 不同的是, ts中属性必须声明,需要指定类型
      constructor(name: string) {
        this.names = name  //声明好属性之后,属性必须赋值一个默认值或者在构造函数中进行初始化
      }
      sayHello (msg: string): void {
        console.log(msg)
        // return 'abc'
      }
    }
    
    1. ts中类的继承
    class Animal {
      age: number
      constructor (age: number) {
        this.age = age;
      }
      eat () {
        console.log("吃啥呢")
      }
    }
    
    class Dog extends Animal {
      type: string
      constructor (type: string, age: number) {
        super(age)
        this.type = type
      }
      //子类中如果出现和父类同名的方法 ,则会重写父类的方法了
      eat () {
        console.log("吃西红柿炒番茄")
      }
    }
    var dog = new Dog('中华田园犬', 18)
    dog.eat()  //实现了Dog对Animal的继承
    
    1. ts中类成员的访问修饰符
    //访问修饰符
    //指的就是可以在类的成员前通过添加关键字来设置当前成员的访问权限
    //public  公开的。默认所有人都可以进行访问
    //private 私有的,只能在当前类中进行访问,不能在任何实例上调用
    //protected  受保护的,只能在当前类或者子类中进行访问,不能在任何实例上调用
    
    enum Color {
      red,
      yellow,
      blue
    }
    
    class Car {
      //如果不加访问修饰符,默认公开 所有成员都可以访问
      color: Color
      constructor () {
        this.color = Color.red
        //this.run()
      }
      private run() {}
      protected load() {}
    }
    
    let byd = new Car()
    //byd.color 可以访问
    // byd.run()  不可以访问
    // byd.load()  不可以访问
    
    class Audi extends Car {
      sayHi() {
        console.log(this.color)
        // this.load() 可以访问
      }
    }
    
    1. readonly只读属性修饰符,参数属性修饰符
    class Cat {
      readonly name: string
      constructor(public type: string) {
        this.name = '加菲'
      }
    }
    
    var cat = new Cat('中华田园猫')
    //cat.name = '123'  报错不可更改
    
    1. ts中类成员存取器
    class People {
      private _name: string = ''
      //属性存取器 利用set,get对参数进行操作
      get name(): string {
        return this._name
      }
      set name(value: string) {
        //设置添加的校验逻辑
        if(value.length < 2 || value.length > 5) {
          throw new Error('名字不合法')
        }
        this._name = value
      }
    }
    
    var p = new People();
    p.name = '这个名字很长'
    
    1. ts中的接口的作用及应用
    //可以理解成一种规范
    //例如option 需要url,type,data,success
    //接口用interface 进行声明
    
    interface AjaxOption {
      url?: string, //可选属性 ?
      type: string,
      data: object,
      success(data: object): void
    }
    
     function ajax (option: AjaxOption) {}
    
     ajax({
        // url: "http:www.baidu.com",  //url是可选属性,可写可不写,其他三个属性不写则报错
        type: "get",
        data: {},
        success(data) {}
     })
    
     interface Point {
       readonly x: number,
       y: number,
       [propName: string]: any   //为多余的属性定义,如下边ps1的成员z
     }
    
     let ps: Point = {
       x: 10,
       y: 10
     }
    
    ps.x = 1111 //x属性为只读属性,赋值报错
    
    let ps1: Point = {
      x: 1,
      y: 2,
      z: 3  //z属性为未声明的属性
    }
    
    1. ts中函数类型的接口
    let sum: Suminterface = function (a:number, b: number) {
      return a + b
    }
    
    interface Suminterface {
      (a: number, b: number): number   //a、b是number类型  返回值也是number类型
    }
    
    1. ts中的类 类型的接口
    interface PersonInter {
      name: string,
      age: number,
      eat(): void
    }
    
    class jj implements PersonInter{
      name = 'jj';
      age = 11;
      eat() {}
    }
    
    1. ts中接口的继承
    //接口继承接口
    interface TwoDPoint {
      x: number,
      y: number
    }
    
    interface ThreeDPoint extends TwoDPoint {
      z: number
    }
    let ps2: ThreeDPoint = {
      z: 100,
      x: 1,
      y: 4
    }
    
    // 接口继承类
    class Bird {
      type: string = '黄鹂'
      fly(): void {}
    }
    
    interface Fly extends Bird {}
    
    let fs: Fly = {
      type: '白鹭',
      fly(): void {}
    }
    

    以上是typescript的全部内容,码字不易,且读且珍惜!

    展开全文
  • Webpack搭建完整Typescript开发环境

    千次阅读 2017-10-22 08:51:58
    提供开发本地服务器以及自动刷新,到转为生产环境代码的编译,压缩,混淆代码以及打包,还是交给一些第三方工具的吧,对,我说的就是Typescript代替Javascript进行前端开发,第三方工具就说的是神器webpack。...

    前言

    IDE提供了强大的纠错与补全能力,但是对于从开发时的编程语言实时转译,提供开发本地服务器以及自动刷新,到转为生产环境代码的编译,压缩,混淆代码以及打包,还是交给一些第三方工具的吧,对,我说的就是Typescript代替Javascript进行前端开发,第三方工具就说的是神器webpack。

    在此记录一下,下一次直接复制粘贴 :-p


    需求

    开发环境

    • 即时编译为js,并自动刷新页面

    生产环境

    • 将es6/es7转为es5
    • 混淆并压缩转译完的js代码

    环境搭建

    cd  <your-dev-dir>
    
    npm init

    目录如下

    <your-dev-dir>
    ├── dist              // 生产环境的js代码输出文件夹
    │   └── index.html   // html 页面
    ├── .babelrc          // babel 配置文件
    ├── package-lock.json
    ├── package.json
    ├── src
    │   └── typescript
    │       ├── main.ts         // typescript入口文件
    │       ├── .......         // 其他ts文件或模块
    ├── tsconfig.json        // typescript配置文件,IDE会读取
    ├── webpack.common.js    // wepack通用配置文件
    ├── webpack.dev.js       // webpack开发环境配置文件
    └── webpack.prod.js      // webpack生产环境配置文件

    安装依赖

    npm install --save-dev babel babel-loader babel-polyfill babel-preset-env ts-loader typescript uglifyjs-webpack-plugin webpack webpack-dev-server webpack-merge

    注:目前babel官方推荐使用 babel-preset-env,而不是 babel-preset-201x


    文件填写

    > dist/index.html

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Title</title>
    </head>
    <body>
    <!-- ... -->
    <!-- 引入js文件 -->
    <script src="bundle.min.js"></script>  
    </body>
    </html>

    > package.json

    // ...
    {
        "scripts": {
            // 启动开发环境
            "dev": "webpack-dev-server --client-log-level none --color --inline --hot --config webpack.dev.js",
            // 启动生产环境
            "build": "webpack --config webpack.prod.js --progress --color"
      },
    // ...
    }

    > tsconfig.json

    {
      "compilerOptions": {
        "sourceMap": true,
        "allowJs": true,
        "module": "commonjs",
        "removeComments": true,
       // 可以使用 Promise, async, await等新语法
        "target": "es2017"
      }
    }

    > .babelrc

    这里完全复制粘贴官方示例代码,详见官网

    { "presets": [
      ["env", {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }]
    ] }

    > webpack.common.js

    必须添加 babel-polyfill, 否则生产环境转es5会出错

    const path = require('path');
    module.exports = {
      entry: ['babel-polyfill', './src/typescript/main.ts'],
      resolve:
        {
          extensions: ['.ts', '.js', '.json']
        },
    };

    > webpack.dev.js

    const path = require('path');
    const merge = require('webpack-merge');
    // 引入通用webpack配置文件
    const common = require('./webpack.common.js');
    
    module.exports = merge(common, {
      module: {
        rules:
          [
            {
              test: /\.tsx?$/,
              loader: 'ts-loader'
            },
          ]
      },
      // 使用 source-map
      devtool: 'source-map',
      // 对 webpack-dev-server 进行配置
      devServer: {
        contentBase: './dist',
        // 设置localhost端口
        port: 9000,
        // 自动打开浏览器
        open: true,
      },
      plugins: [
      ],
      // 设置出口文件地址与文件名
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.min.js'
      },
    });

    > webpack.prod.js

    const path = require('path');
    const merge = require('webpack-merge');
    // 引入通用webpack配置文件
    const common = require('./webpack.common.js');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    // 对js代码进行混淆压缩的插件
    const uglifyJSPlugin = new UglifyJSPlugin();
    
    // 对babel的配置,内容同.babelrc文件
    const babelOptions = {
      "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "safari >= 7"]
          }
        }]
      ]
    }
    module.exports = merge(common, {
      module: {
        rules: [{
          test: /\.ts(x?)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: babelOptions
            },
            {
              loader: 'ts-loader'
            }
          ]
        }]},
      devtool: 'cheap-module-source-map',
      plugins: [
        uglifyJSPlugin,
      ],
      // 设置出口文件地址与文件名
      output: {
        path: path.resolve('dist'),
        filename: 'bundle.min.js'
      },
    });

    大功告成

    进行开发!

    npm run dev

    开发完成,获取最终文件

    npm run build

    注:先停止第一个命令

    展开全文
  • Webpack4 配置TS Loader

    千次阅读 2019-07-19 16:05:10
    目前没有任何环境支持运行原生的 TypeScript 代码,必须通过构建把它转换 JavaScript 代码后才能运行。 TypeScript 官方提供了能把 TypeScript 转换 JavaScript 的编译器:typescript 。 你需要在当前项目根...

    TypeScript 是 JavaScript 的一个超集,主要提供了类型检查系统和对 ES6 语法的支持,但不支持新的 API。 目前没有任何环境支持运行原生的 TypeScript 代码,必须通过构建把它转换成 JavaScript 代码后才能运行。

    TypeScript 官方提供了能把 TypeScript 转换成 JavaScript 的编译器:typescript 。 你需要在当前项目根目录下新建一个用于配置编译选项的 tsconfig.json 文件( 不是必须的 ),编译器typescript `默认会读取和使用这个文件,配置文件内容大致如下:

    tsconfig.js更多的配置

    {
      "compilerOptions": {
        "module": "commonjs", // 编译出的代码采用的模块规范
        "target": "es5", // 编译出的代码采用 ES 的哪个版本
        "sourceMap": true, // 输出 Source Map 方便调试
        "importHelpers": true // 减少代码的冗余,类似:@babel/plugin-transform-runtime
      },
      "exclude": [ // 不编译这些目录里的文件
        "node_modules"
      ]
    }
    

    通过 npm install typescript -save-dev 安装编译器到本地项目

    新建一个项目

    |-- package.json
    |-- tsconfig.js
    |-- src
    |   |       `-- common.ts
    |   |       `-- index.html
    |           `-- main.ts
    `-- webpack.config.js
    

    tsconfig.js 编译器的配置文件

    // 1.typescript 编译器的配置文件:
    {
      // 2.编译的参数
      "compilerOptions": {
        "module": "commonjs", // 编译出的代码采用的模块规范
        "target": "es5", // 编译出的代码采用 ES 的哪个版本
        "sourceMap": true, // 输出 Source Map 方便调试
        "importHelpers": true // 减少代码的冗余,类似:@babel/plugin-transform-runtime
      },
      // 3.排除项 
      "exclude": [ // 不编译这些目录里的文件
        "node_modules"
      ]
    }
    

    package.json

    {
      "name": "testtsloader",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode development",
        "build": "webpack --mode production"
      },
      "author": "liujun",
      "license": "ISC",
      "devDependencies": {
        "awesome-typescript-loader": "^5.2.1",
        "typescript": "^3.5.3",
        "webpack": "^4.35.3",
        "webpack-cli": "^3.3.6"
      },
      "dependencies": {}
    }
    
    

    1.scripts 属性里编写了3个脚本:其中 dev 对应的脚本是 构建测试版;其中 build对应的脚本是 构建发布版

    2.使用的开发依赖有:awesome-typescript-loader typescript webpack webpack-cli

    webpack.config.js

    const path = require('path');
    module.exports = {
      entry: './src/main.ts',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'), 
      },
      resolve: {
        // 执行import { showHelloWorld } from './common'; 
        // 先尝试 ts 后缀的 TypeScript 源码文件,在尝试 js 后缀 JavaScript 源码文件
        extensions: ['.ts', '.js'] 
      },
      module: {
        rules: [
          {
            test: /\.ts$/,
            // use:['awesome-typescript-loader']
            // 1.该 Loader 是把 TypeScript 转换成 JavaScript, 只负责新语法的转换,新增的API不会自动添加polyfill
            loader: 'awesome-typescript-loader'
          }
        ]
      },
      devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
    };
    

    use接收一个数组数组中可存放字符串和对象,并且use的别名是 loaders;如果不用use也可直写loader

    main.ts

    // 1.通过 CommonJS 规范导入 showHelloWorld 函数
    import { showHelloWorld } from './common';
    // 2.执行 showHelloWorld 函数
    showHelloWorld('Webpack的安装和使用');
    

    common.ts

    export const showHelloWorld = (content:string) => {
      alert('hello world')
    }
    
    
    // 2.class 定义类也是es6新的语法。目的是要把es6新的语法转成es5语法
    class Person {
      // 定义一个变量
      private name: string
      constructor(name: string){
        this.name = 'person'
      }
      testSet() {
    
      }
    }
    

    index.html

    <html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
    <div id="app"></div>
    <!--导入 Webpack 输出的 JavaScript 文件-->
    <script src="../dist/bundle.js"></script>
    </body>
    </html>
    

    本地安装 webpack 和 用到的loader

    npm install webpack@4.35.3  --save-dev
    npm install webpack-cli@3.3.6  --save-dev
    
    npm install awesome-typescript-loader@5.2.1  --save-dev // 负责 将 TS 转换成 ES5语法
    npm install typescript@3.5.3  --save-dev  // 负责编译 TS 文件为 JS 文件
    

    在项目的根目录,执行脚本构建项目

    npm run dev

    打包后输出的结果

    |-- dist
    |   |-- bundle.js
    |   |-- bundle.js.map
    |-- node_modules
    |-- package-lock.json
    |-- package.json
    |-- tsconfig.js
    |-- src
    |   |-- common.ts
    |   |-- index.html
    |   `-- main.ts
    `-- webpack.config.js
    
    

    打包之后的 bundle.js 文件的部分内容:

    /***/ "./src/common.ts":
    /*!***********************!*\
      !*** ./src/common.ts ***!
      \***********************/
    /*! no static exports found */
    /***/ (function(module, exports, __webpack_require__) {
    
    "use strict";
    
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.showHelloWorld = function (content) {
        alert('hello world');
    };
    // 2.class 定义类也是es6新的语法。目的是要把es6新的语法转成es5语法
    var Person = /** @class */ (function () {
        function Person(name) {
            this.name = 'person';
        }
        Person.prototype.testSet = function () {
        };
        return Person;
    }());
    
    
    /***/ }),
    
    /***/ "./src/main.ts":
    /*!*********************!*\
      !*** ./src/main.ts ***!
      \*********************/
    /*! no static exports found */
    /***/ (function(module, exports, __webpack_require__) {
    
    "use strict";
    
    Object.defineProperty(exports, "__esModule", { value: true });
    // 1.通过 CommonJS 规范导入 showHelloWorld 函数
    var common_1 = __webpack_require__(/*! ./common */ "./src/common.ts");
    // 2.执行 showHelloWorld 函数
    common_1.showHelloWorld('Webpack的安装和使用');
    
    
    /***/ })
    
    /******/ });
    

    总结:

    上面webpack.config.js配置中的use通过正则 /.ts$/ 匹配所有以 .ts为后缀的 TS文件,再使用awesome-typescript-loade 去处理。具体处理流程如下:

    1.通过awesome-typescript-loade 把 TypeScript 转换成 JavaScript( 新增的语法会转换为ES5,新增API不会 )
    2.typescript 是一个编译器,把 TypeScript 转换成 JavaScript 的编译器。

    项目源码

    展开全文
  • 通常我们需要采用ES6编写的代码转换目前已经支持良好的ES5代码,包含如下: 新的ES6语法用ES5实现,例如ES6的class语法用ES5的prototype实现; 为新的API注入polyfill,例如使用新的fetch API时在注入对应的...

    一、使用新语言来开发项目

    1、使用ES6语言

    通常我们需要将采用ES6编写的代码转换成目前已经支持良好的ES5代码,包含如下:

    • 将新的ES6语法用ES5实现,例如ES6的class语法用ES5的prototype实现;
    • 为新的API注入polyfill,例如使用新的fetch API时在注入对应的polyfill后才能让低端浏览器正常运行。
    1. 认识Babel
      Babel(https://babeljs.io) 可以方便地完成以上两件事。Babel是一个JavaScript编译器,能将ES6代码转为ES5代码转为ES5代码,让我们使用最新的语言特性而不用担心兼容性问题,并且可以通过插件机制根据需求灵活地扩展。在Babel执行编译的过程中,会从项目根目录下的 .babelrc 文件中读取配置。 .babelrc是一个JSON格式文件,内容大致如下:

      {
      	"plugins": [
      		[
      			"transform-runtime",
      			{
      				"polyfill": false
      			}
      		]
      	],
      	"presets": [
      		[
      			"es2015",
      			{
      				"modules": false
      			}
      		],
      		"stage-2",
      		"react"
      	]
      }
      

      1.1 Plugins
      plugins属性告诉Babel要使用哪些插件,这些插件可以控制如何转换代码。
      以上配置文件里的transform-runtime对应的插件全名叫作babel-plugin-transform-runtime,即在前面加上了babel-plufing-。要让Babel正常运行,我们必须先安装这个插件:npm i -D babel-plugin-transform-runtime
      babel-plufin-transform-runtime是Babel官方提供的一个插件,作用是减少冗余的代码。Babel在将ES6代码转换成ES5代码时,通常需要一些由ES5编写的辅助函数来完成新语法的实现,例如转换class extent语法时会在转换后的ES5代码里注入_extent辅助函数用于实现继承:

      function _extent(target){
      	for(var i = 1; i < arguments.length; i++){
      		var source = arguments[i];
      		for(var key in source){
      			if(Object.prototype.hasOwnProperty.call(source, key)){
      				target[key] = source[key];
      			}
      		}
      	}
      	return target;
      }
      

      这个导致每个使用class extent语法的文件都被注入重复的_extent辅助函数代码,babel-plufin-transform-runtime的作用在于将原本注入JavaScript文件里的辅助函数替换成一条导入语句:
      var _extent = require('babel-runtime/helpers/_extent');
      这样能减少Babel编译出来的代码的文件大小。
      同时需要注意的是,由于babel-plugin-transform-runtime注入了require('babel-runtime/helpers/_extent')语句到编译后的代码里,需要安装babel-runtime依赖到我们的项目后,代码才能正常运行。也就是说babel-plugin-tranform-runtimebabel-runtime需要配套使用,在使用babel-plugin-transform-runtime后一定需要使用babel-runtime
      1.2 Presets
      presets属性告诉Babel要转换的源码使用了哪些新的语法特性,一个Presets对一组新语法的特性提供了支持,多个Presets可以叠加。Presets其实是一组Plugins的集合,每个Plugin完成一个新语法的转换工作。Presets是按照ECMAScript草案来组织的,通常可以分为三大类。
      (1)已经被写入ECMAScript标准里的特性,由于之前每年都有新特性被加入到标准里,所以又可细分如下。
      + ES2015(https://babeljs.io/docs/plugins/preset-es2015/): 包含在2015年加入的新特性。
      + ES2016(https://babeljs.io/docs/plugins/preset-es2016/): 包含在2016年加入的新特性。
      + ES2017 (https://babeljs.io/docs/plugins/preset-es2017/): 包含在2017年加入的新特性。
      + Env(https://babeljs.io/docs/plugins/preset-env),包含当前所有ECMAScript标准里的最新特性。

    2. 接入Babel
      在了解Babel后,下一步就需要知道如何在Webpack中使用它。由于Babel所做的事情是转换代码,所以应该通过Loader去接入Babel。Webpack的配置如下:

    module.exports = {
    	module: {
    		rules: [
    			{
    				test: /\.js$/,
    				use: ['babel-loader'],
    			},
    		]
    	},
    	// 输出source-map以方便直接调试ES6源码
    	devtool: 'source-map'
    }
    

    以上配置命中了项目目录下的所有JavaScript文件,并通过babel-loader调用Babel完成转换工作。在重新执行构建前,需要先安装新引入的依赖:

    # Webpack 接入Babel必须依赖的模块
    npm i -D babel-core babel-loader
    # 根据我们的需求选择不同的Plugins或Presets
    npm i -D babel-preset-env
    

    2. 使用TypeScript语言

    1. 认识TypeScript
      TypeScript是JavaScript的一个超集,主要提供了类型检查系统和对ES6语法的支持,但不支持新的API。目前没有任何环境支持运行原生的TypeScript代码,必须通过构建将它转换成JavaScript代码后才能运行。
      下面改造一下前面用过的例子,用TypeScript重写JavaScript。由于TypeScript是JavaScript的超集,直接将后缀.js改成.ts是可以的。但为了体现出TypeScript的不同,我们在这里重写JavaScript代码,并加入类型检查:
    // show.ts
    // 通过DOM元素,将content显示到网页上
    // 通过ES6模块规范导出show函数
    // 为show函数增加类型检查
    export function show(content: string){
    	window.document.getElementById('app').innerText = 'Hello,' + content;
    }
    // main.ts
    // 通过ES6模块规范导入show函数
    import { show } from './show';
    // 执行show函数
    show('Webpack');
    

    TypeScript官方提供了能将TypeScript转换成JavaScript的编译器。我们需要在当前项目的根目录下新建一个用于配置编译选项的tsconfig.json文件,编译器默认会读取和使用这个文件,配置文件的内容大致如下:

    {
    	“compilerOptions”: {
    		"module": "commonjs",		// 编译出的代码采用的模块规范
    		"target": "es5",			// 编译出的代码采用ES的哪个版本
    		"sourceMap": true		// 输出Source Map以方便调试
    	},
    	"exclude": [		// 不编译这些目录里的文件
    		"node_modules"
    	]
    }
    

    通过npm install -g typescript 安装编译器到全局后,可以通过tschello.ts命令编译出hello.js和hello.js.map文件。

    1. 减少代码冗余
      TypeScript编译器会有与3.1节中Babel同样的问题:在将ES6语法转换成ES5语法时需要注入辅助函数。为了不让同样的辅助函数重复出现在多个文件中,可以开启TypeScript编译器的importHelpers选项,需要修改tsconfig.json文件如下:
    {
    	"compilerOptions": {
    		"importHelpers": true	
    	}
    }
    

    该选项的原理和Babel中介绍的babel-plugin-transform-runtime非常类似,会将辅助函数转换成如下导入语句:

    var _tslib = require('tslib');
    _tslib._extend(target);
    

    这会导致编译出的代码依赖tslib这个迷你库,但避免了代码冗余。

    1. 集成Webpack
      要让Webpack支持TypeScript,需要解决以下两个问题。
    • 通过Loader将TypeScript转换成JavaScript。
    • Webpack在寻找模块对应的文件时需要尝试ts后缀。
      我们需要修改默认的resolve.extensions配置项。
      相关的Webpack配置如下:
    const path = require('path');
    module.exports = {
    	// 执行入口文件
    	entry: './main',
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, './dist'),
    	},
    	resolve: {
    		// 先尝试以ts为后缀的TypeScript源码文件
    		extensions: ['.ts', '.js']
    	},
    	module: {
    		rules: [
    			{
    				test: /\.ts$/,
    				loader: 'awesome-typescript-loader'
    			}
    		]
    	},
    	devtool: 'source-map',			// 输出Source Map以方便在浏览器里调试TypeScript代码
    }
    

    在运行构建前需要安装上面用到的依赖:
    npm i -D typescript awesome-typescript-loader
    安装成功后重新执行构建,我们将会在dist目录下看到输出的JavaScript文件bundle.js,以及对应的Source Map文件bundle.js.map。在浏览器里打开index.html页面后,可以在开发工具里看到和调试用TypeScript编写的源码。

    3. 使用Flow检查器

    1. 认识Flow
      Flow是Facebook开源的一个JavaScript静态类型检查器,它是JavaScript语言的超集。我们所需要做的就是在需要的地方加上类型检查,例如在两个由不同的人开发的模块对接的接口处加上静态类型检查,就能在编译阶段指出部分模块使用不当的问题。同时,Flow能通过类型推断检查出在JavaScript代码中潜在的Bug。
      Flow的使用效果如下:
      // @flow
      // 静态类型检查
      function squarel(n: number): number {
      	return n * n;
      }
      squarel('2');			// Error: squarel需要传入number作为参数
      // 类型推断检查
      function square2(n){
      	return n * n;		// Error: 传入的string类型不能做乘法运算
      }
      square2('2');
      
      需要注意的是,该段代码的第一行//@flow告诉Flow检查器这个文件需要被检查。
    2. 使用Flow
      以上只是让我们了解Flow的功能,下面讲解如何运行Flow来检查代码。Flow检测器由高性能且跨平台的OCaml(http://ocaml.org)语言编写,它的可执行文件可以通过npm i -D flow-bin安装,安装完成后可先配置Npm Script:
      "scripts": {
      	"flow": "flow"
      }
      
      再通过npm run flow去调用Flow执行代码检查。
      除此之外,我们还可以通过npm i -g flow-bin将Flow安装到全局,再直接通过flow命令执行代码检查。
      安装成功后,在项目根目录下执行Flow, Flow会遍历出所有需要检查的文件并对其进行检查,输出错误结果到控制台,例如:
      Error: show.js:6
      	6: export function show(content){
      								^^^^^^^ parameter `content`. Missing annotation Found 1 error
      	}
      
      采用了Flow静态类型语法的JavaScript,是无法直接在目前已有的JavaScript引擎中运行的,要让代码可以运行,需要将这些静态类型的语法去掉。例如:
      // 采用Flow的源代码
      function foo(one: any, two: number, three?): string{}
      // 去掉静态类型语法后输出代码
      function foo(one, two, three){}
      
      有两种方式可以做到这一点。
    3. 集成Webpack
      由于使用了Flow项目一般都会使用ES6语法,所以将Flow集成到使用Webpack构建的项目里的最方便方法是借助Babel。下面修改3.1节中的代码,为其加入Flow代码检查,改动如下。
      (1)安装npm i -D babel-preset-flow依赖到项目。
      (2)修改.babelrc配置文件,加入Flow Preset:
      "presets": [ ...[], "flow" ]
      向源码里加入静态类型后重新构建项目,我们会发现采用了Flow的源码还是能在浏览器中正常运行的。
      要明确构建的目的只是去除源码中的Flow静态类型语法,而代码检查和构建无关,许多编辑器已经整合了Flow,可以实时在代码中高亮显示Flow检查出的问题。

    4. 使用SCSS语言

    1. 认识SCSS
      SCSS(http://sass-lang.com)可以让我们用更灵活的方式写CSS。它是一种CSS预处理器,语法和CSS相似,但加入了变量、逻辑等编程元素,代码类似这样:
      $blue: #1875e7;
      div{
      	color: $blue;
      }
      
      SCSS又叫作SASS,区别在于SASS语法类似于Ruby,而SCSS语法类似于CSS,熟悉CSS的前端工程师会更喜欢SCSS。
      采用SCSS去写CSS的好处在于,可以方便的管理代码,抽离公共的部分,通过逻辑写出更灵活的代码。和SCSS类似的CSS预处理器还有LESS(http://lesscss.org)等。
      使用SCSS可以提升编码的效率,但是必须将SCSS源代码编译成可以直接在浏览器环境下运行的CSS代码。SCSS官方提供了以多种语言实现的编译器,由于本书更倾向于前端工程师使用的技术栈,所以主要介绍node-sass(http://github.com/sass/node-sass)。
      node-sass的核心模块是用C++编写的,再用Node.js封装了一层,以提供给其他Node.js调用。node-sass还支持通过命令进行调用,先将它安装到全局:
      npm i -g node-sass
      
      再执行编译命令:
      # 将main.scss源文件编译成main.css
      node-sass main.scss main.css
      
      就能在源码同目录下看到编译后的main.css文件。
    2. 接入Webpack
      我们曾在1.4节介绍过将SCSS源代码转换成CSS代码的最佳方式是使用Loader,Webpack官方提供了对应的sass-loader(https://github.com/webpack-contrib/sass-loader)。
      Webpack接入sass-loader的相关配置如下:
      module.exports = {
      	module: {
      		rules: [
      			{
      				// 增加对SCSS文件的支持,
      				test: /\.scss/,
      				// SCSS文件的处理顺序为先sass-loader,再css-loader,再style-loader
      				use: ['style-loader', 'css-loader', 'sass-loader'],
      			},
      		]
      	}
      }
      
      以上配置通过正则/.scss/匹配所有以.scss为后缀的SCSS文件,再分别使用3个Loader去处理。具体处理流程如下。
      • 通过sass-loader将SCSS源码转换为CSS代码,再将CSS代码交给css-loader处理。
      • css-loader会找出CSS代码中@import和url()这样的导入语句,告诉Webpack依赖这些资源。同时支持CSS Module、压缩CSS等功能。处理完后再将结果交给style-loader处理。
      • style-loader会将CSS代码转换成字符串后,注入JavaScript代码中,通过JavaScript向DOM增加样式。如果我们想将CSS代码提取到一个单独的文件中,而不是和JavaScript混在一起,则可以使用在1.5节中介绍过的ExtractTextPlugin。
        由于接入sass-loader,所以项目需要安装这些新的依赖:
      # 安装Webpack Loader依赖
      npm i -D sass-loader css-loader style-loader
      # sass-loader依赖node-sass
      npm i -D node-sass
      

    本文为学习笔记:来源《深入浅出Webpack》

    展开全文
  • Webpack4与Typescript结合开发

    千次阅读 2018-05-08 22:28:37
    mkdir ts-webpack 使用npm init 工程 安装: npm install --save-dev webpack webpack-cli npm install --save-dev typescript ts-loader 2.创建tsconfig.json { &quot;compilerOptions&quot;: { &...
  • webpack取消严格模式打包use strict

    万次阅读 2019-02-13 16:49:23
    有时候用webpack打包,引入的...es6自动打包成es5会加上严格模式。如何取消掉,直接在webpack配置文件中设置:   var config = { entry: { home: buildBundle( 'home' ), }, output: { path: BUILD_DIR...
  • Webpack构建的项目配置支持TypeScript

    千次阅读 2018-12-24 22:01:55
     安装依赖包的时候注意版本,因为我现在用的是 webpack@3.10.0,所以相对应的 ts-loader 包版本不能太高,不然编译时会报错。 npm i -g typescript@2.7.2 npm i --save-dev typescript@2.7.2 ts-loader@3.1.1 2....
  • webpack 如何优雅的使用tree-shaking1.什么是tree-shakingwebpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js,先如今,webpack 2也有类似的做法。webpack 里的tree-shaking的...
  • babel就承担了“翻译”的角色,把es6的写法转换成es5的写法。 但是有些人可能在一个项目中单独安装完babel,并成功生成了新的文件后,发现导入这个文件到浏览器中却报错了。其中很有可能被误导的是 import这个...
  • VUE+TS+WEBPACK框架的项目实践

    万次阅读 2018-01-31 11:58:20
    一、作者简介 WONDER专注于框架的研究,致力于提升效能,解放生产力。包括但不限于设计流程化,重构流程化,前端流程化,基于数据流、状态流的自动化测试。致力于基于javascript语言的全平台解决方案的研究(包括...
  • vue+TypeScript构建第一个项目

    千次阅读 2020-04-27 11:14:29
    安装项目 ...vue init webpack vue-ts 后面一系列路由,测试单元配置忽略。 //新建项目后我们安装ts npm install typescript ts-loader --save-dev //安装一下官方插件 npm i vue-class-c...
  • 使用webpack打包编译TypeScript 导读 TypeScript 是 ...这篇博文里我们会学习如何集成 webpack 跟 TypeScript。 项目地址:https://github.com/RiversCoder/webpack-test 安装ts开发依赖 cnpm install --D...
  • react+webpack4+typescript搭建项目

    千次阅读 2018-05-19 18:37:25
    公司项目打算从vue框架转成react,所以自学了下如何用webpack4搭建react+typescript的项目,虽说有脚本架create-react-app直接搭建,公司大佬也正在自己封装属于自己的脚本架,但是这里我想从0到1的自己搭建学习搭建...
  • webpack-js篇

    千次阅读 2020-01-30 12:25:37
    webpack 自动化构建工具 Javascript打包
  • webpack打包不识别es6语法的坑

    千次阅读 2019-01-21 18:25:21
    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是webpack的babel需要配置下 Babel其实是一个...
  • 文章目录vue+typescript+webpack4 项目搭建步骤1、初始化项目2、webpack@3.6.0升级至webpack@4.37.01、webpack.optimize.CommonsChunkPlugin2、compilation.mainTemplate.applyPluginsWaterfall3、Error: Ch...
  • 背景 自2019年来,前端er们应该面临过无数次...直入主题,我的项目是基于react的,希望在新的功能上使用Typescript,并逐步修改之前的代码,所以我需要同时支持(TS|TSX)和(JS|JSX)。 方法 Typescript通常是...
  • webpack-编译TypeScript

    千次阅读 2018-12-03 17:38:47
    TypeScript ...在webpack中使用TypeScript,需要安装 TypeScript 的 loader 有两个 官方推荐的 npm i typescript ts-loader --save-dev 第三方的 npm i typescript awesome-typescript-loader --s...
  • 从Npm Script到Webpack,6种常见的前端构建工具对比小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用Node.js...
  • 自:http://www.limbonova.com/2017/09/setup-pixijs-with-typescript-using-webpack/前几天写了一篇用Browserify打包的 PixiJS 的开发环境配置流程,但是Web技术一日千里,开发工具也日新月异, Webpack 就是其中...
1 2 3 4 5 ... 20
收藏数 1,340
精华内容 536
关键字:

webpack 将ts代码转成es5