首先要感谢美女 Daisy ，该项目是 Daisy大姐 的 《HTML5小游戏—-爱心鱼》 TS 重构版本。

    建议对照源码看教程，假如你要自己写的话，可能你需要很强的 debug 能力。

    源码点我

    • 首先创建文件夹
    1. mkdir luvdisc
    • 创建存放资源的文件夹
    1. mkdir luvdisc/assets
    2. mkdir luvdisc/assets/img
    3. mkdir luvdisc/assets/css
    • 初始化
    1. npm init -y
    3. tsc --init
    • 安装依赖
    1. npm install -D typescript rollup rollup-watch rollup-plugin-node-resolve rollup-plugin-commonjs live-server npm-run-all
    • 创建 rollup.config.js

    关于更多 rollup 的视频，你可以在本站找到。

    1. import commonjs from 'rollup-plugin-commonjs'
    2. import nodeResolve from 'rollup-plugin-node-resolve'
    4. export default {
    5.   entry: 'dist/main.js',
    6.   dest: 'bundle.js',
    7.   format: 'iife',
    8.   plugins: [
    9.     nodeResolve({
    10.       jsnext: true,
    11.       main: true,
    12.       browser: true
    13.     }),
    14.     commonjs(),
    16.   ],
    17.   sourceMap: true
    18. }
    • 修改我们的 package.json 的启动脚本
    1.   "scripts": {
    2.     "watch:ts": "tsc -w",
    3.     "watch:bundle": "rollup -c -w",
    4.     "watch": "npm-run-all --parallel watch:ts watch:bundle",
    5.     "serve": "live-server .",
    6.     "dev": "npm-run-all --parallel watch serve"
    7.   },
    • 修改 tsconfig.json 的编译选项
    1. {
    2.   "compilerOptions": {
    3.     "module": "ES6",
    4.     "target": "ES6",
    5.     "noImplicitAny": false,
    6.     "sourceMap": false
    7.   }
    8. }

    • 新建 dist 目录

    • 新建 index.html

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Luvdisc</title>
    6. </head>
    7. <body>
    9.   <script src="bundle.js"></script>
    10. </body>
    11. </html>
    • 新建src/main.ts文件
    1. console.log('init');
    • 在终端里面运行
    1. npm run dev

    假如启动失败，Ctrl+c 结束再运行就可以了，第一次运行报错是因为没有找到dist/main.js导致的。

    之后修改一下 main.ts，看是否自动更新。

    当我们导入 lodash 的时候，会报错。

    搭建环境 - 图1

    这是因为d.ts文件太老了，我们修改更新一下，把鼠标移动到 lodash 上面按 F12。

    搭建环境 - 图2

    我们看到这里是 export = _，这种语法已经被抛弃了，把=改成 default 即可。

    如下完成我们的代码。

    1. import _ from "lodash";
    3. console.log(_.add( 2, 5))

    控制台的输出

    搭建环境 - 图3

    到这里，环境搭建已经完成了，我们看到，我并没有使用 rollup 的 typescript 编译插件，是因为这个插件在报错之后就失效了，需要我们手动重启，非常麻烦。

    而 rollup 的 livereload 监听 dist 下面的文件也存在一定的瑕疵，所以改成了 live-server，直接监听整个项目文件。

    最后，项目文件夹会是这样。

    1. $ tree -L 1
    2. .
    3. ├── assets
    4. ├── bundle.js
    5. ├── bundle.js.map
    6. ├── dist
    7. ├── index.html
    8. ├── node_modules
    9. ├── package.json
    10. ├── rollup.config.js
    11. ├── src
    12. └── tsconfig.json