构建、打包工具简介:
Gulp、Grunt、Browserify、Webpack、Rollup
Gulp、Grunt: 构建流程管理工具,通过定义和执行任务的方式构建工作。如预编译语言的处理、模块打包、代码压缩等
Browserify、Webpack、Rollup属于打包工具,把模块按照特定的规则合并到一起,使浏览器可执行
新建Webpack项目
npm 包管理器 - 可以让DEV获取代码和分发代码的工具,如一些具有特定功能的工具或框架等。Javascript主流的包管理器: NPM、Yarn
使用Npm之前应该 设置npm国内镜像 npm config set registry https://registry.npm.tabao.org
步骤简介:
- npm Init ---- 初始化npm工程(类似于Maven、Gradle工程)。 产物 - package.json 这个文件主要是引入dependency、devdependency的功能
- 安装npm包。这里--save是要将依赖添加到 package.json的dependecy节点中。
- npm install typescript --save
- 安装webpack, webpack-dev-server等开发工具框架到Package.json的 devDependency中
-
npm install webpack --save-dev
-
npm install webpack-dev-server --save-dev
- webpackage的安装包被放在了 node_modules/.bin/webpack中。 可以使用Webpack提供的打包功能将ES6、Typescript的js文件打包到指定的文件中。
- node_modules/.bin/webpack app.js dist/bundle.js
- 这时html中只要引用dist/bundle.js就可以了
- 有一个问题是随着文件的增多,打包可能变得很复杂。参数也可能变得不好记。 此时引入了webpack.config.js
// entry 是整个webpack的根节点,webpack从根节点js文件能够找到其他的依赖。并能自动解决依赖 // output 是输出的打包文件 // devServer 启动的本地调试server,指定端口号以及本地打包文件的存放地 const path=require('path'); const webpack = require('webpack'); module.exports={ entry: './src/main.ts', output:{ path: path.join(__dirname,'dist'), filename: 'bundle.js' }, resolve:{ extensions:['*','.ts','.js'] }, module:{ loaders:[ {test:/.ts$/,loader: 'ts-loader'} ] }, devServer:{ port: 3001 } };
- 启动devServer,即node_modules/.bin/webpack-dev-server'。 浏览器中查看第9步中的html文件查看变更生效
- 进一步简化。devServer的启动、Webpack的打包工作。 即使用script的方式进行快捷操作. 在Package.json中新增 scripts 脚本。 将第8、12步webpack指令添加进去就可以了。 如下:
-
{ "name": "webpack", "version": "1.0.0", "description": "", "scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "node_modules/.bin/webpack", "server": "node_modules/.bin/webpack-dev-server --inline --colors --progress", "start": "cnpm run server" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.8.1", "webpack-dev-server": "^2.9.4" } }
配置eslint:
https://github.com/xcatliu/typescript-tutorial/blob/master/ecosystem/eslint.md