Skip to content

环境配置及运行

Jump to bottom Edit New page
花生PeA edited this page Feb 9, 2019 · 6 revisions

Short Night 依赖于 TypeScript 和 Webpack，所以，写一个 Short Night 主题时，也要配置好环境才可以。简单来说分为下面几步：

  1. 初始化项目
  2. 创建 Webpack 配置文件（仅20行！）
  3. 运行 Webpack

我打赌你10分钟就可以搞定，让我们开始吧！

首先在一个文件夹下创建 Nodejs 环境：

npm init -y

然后安装一些必须的依赖：

npm install short-night typescript webpack webpack-cli ts-loader style-loader css-loader

最后一步，创建一个 webpack 配置文件（webpack.config.js）到项目根目录，一个只有20行的 Webpack 配置文件~！

const Webpack = require('webpack');

module.exports = {
    entry: './entry.ts',
    output: {
        path: __dirname,
        filename: 'output.js',
    },
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader' },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        ],
    },
    resolve: { extensions: ['.js', '.ts'] },
    plugins: [
        new Webpack.DefinePlugin({ // Short Night 依赖于此插件来读取是否开启 Debug 模式
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        }),
    ],
};

环境搭建完成！根本不需要什么脚手架工具，徒手即可完成~~

上边webpack.config.js文件中唯一比较复杂的就是Webpack.DefinePlugin插件的使用。插件中我们定义了一个process.env.NODE_ENV变量，他会在 Webpack 编译时，将项目文件中的process.env.NODE_ENV替换为 Nodejs 中的process.env.NODE_ENV。听起来有些绕？没关系，你只要知道将环境变量NODE_ENV赋值成development意味着开启 Debug 模式，production意味着关闭 Debug 模式即可。

不过，为了能让 TypeScript 识别上边插件定义的process.env.NODE_ENV，我们需要在项目根目录下额外增加一个global-types.d.ts，内容为：

declare const process:any;

创建 HTML 及 Webpack 入口文件

在根目录下创建一个index.html来运行整个项目，内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app"></div>
    <script src="output.js"></script>
</body>
</html>

关键在于body中的2行：

  1. <div id="app"></div>：我们定义了一个挂载点，将来要将时间线挂载到那里
  2. <script src="output.js"></script>：我们引用了 Webpack 的编译产出文件，这里的src对应webpack.config.js中的output

然后我们为 Webpack 创建入口文件/entry.ts：

import Timeline from './Timeline'; // 引用上一步中，你自己定义的 Timeline
import '@foxzilla/short-night/styles.css'; // 官方定义的引用 CSS 文件

const timeline = new Timeline( // 将 container 和 canvas 传入构造
    Timeline.mount('#app', 'polar-day') // 将 #app 初始化，主题名为 polar-day。该方法返回一个 container 和 一个 canvas
);

timeline.drawInfo.events = [{ // 赋值事件列表，确保事件要大于2个
    date: '2019-2-4',
    title: 'The theme of Rules start',
},{
    date: '2017-10-1',
    title: 'Project start',
}];

timeline.apply().then(function () { // 应用 timeline 中的 drawInfo。此方法返回一个 Promise
    timeline.draw(); // 当应用完成后，将 timeline 画出
});

你可能会奇怪为什么使用 Timeline 要如此繁琐。实际上，这正是 Short Night 中一个 Component 从创建到绘制的流程：

  1. 构造时传入container、canvas等信息
  2. 手动赋值修改.drawInfo.xxx
  3. 调用.apply()来应用drawInfo
  4. 等待.apply()调用.draw()完成绘制

运行

接下来到了最激动人心的时刻了！

在 package.json 中增加一个 script

  "scripts": {
+   "dev": "webpack --watch --mode=development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

然后在命令行中，键入npm run dev后，等待 Webpack 编译完毕，打开我们上边创建的index.html到浏览器中。

接下来，若能看到页面无报错且页面显示出了一些文字，即为成功！

Modules Documents for English 中文文档

Modules

Documents for English

中文文档

Clone this wiki locally