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

    • 创建存放资源的文件夹
    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 的视频，你可以在本站找到。

    • 修改我们的 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.   },
    1. {
    2.   "compilerOptions": {
    3.     "module": "ES6",
    4.     "target": "ES6",
    5.     "noImplicitAny": 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. </html>
    • 新建src/main.ts文件
    • 在终端里面运行
    1. npm run dev

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

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

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

    搭建环境 - 图1

    如下完成我们的代码。

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

    控制台的输出

    到这里，环境搭建已经完成了，我们看到，我并没有使用 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