搭建d3.js开发环境

技术

1、安装node.js 2、初始化项目

创建目录，进入目录，执行命令 npm init -y

然后建立src目录用于存放源码，dist用于存放编译好的代码

3、安装和配置webpack

执行npm install webpack webpack-cli --save-dev

创建文件 webpack.config.js ，写入以下内容

const path = require(‘path’);

module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘main.js’,
path: path.resolve(__dirname, ‘dist’)
}
};

修改package.json，在scripts中加入"build": "webpack" 4、安装d3.js

执行 npm install d3 --save

5、编写代码

创建dist/index.html，并写入以下内容

<!doctype html>

Getting Started

创建src/index.js，并写入以下内容

import * as d3 from “d3”;

6、编译与运行

执行 npm run-script build该命令生成了dist/main.js

在浏览器中打开dist/index.html即可看到代码运行后的效果

我的博客