如何使用ES6开发Three.js项目

如何使用ES6开发Three.js项目

配置开发环境：node.js+webpack+webpack-dev-server+babel+ES6+three.js

node.js
webpack
webpack-dev-server
babel
ES6
three.js

1、使用npm安装three.js。注意安装命令是three不是three.js。因为three.js（0.77）是老本版，已经更名为three了。

three.js的npm官网： https://www.npmjs.com/package/three （目前版本0.95）

npm install three --save

2、在index.js文件中引入 hrss.js模块

const THREE = require('three')

3、在index.js文件中引入dat.GUI.js模块。

不是通过npm安装的所以不能直接以模块的方式引用。可以通过传统的方式引用：<script type="text/javascript" src="dat.gui.min.js"></script>。如果通过模块的方式需要在dat.GUI.js文件末尾添加：module.exports = dat。在index.js文件头部添加：const dat = require('./dat.GUI')。

当然我们也可以通过npm的方式来安装。 $ npm install --save dat.gui。

// CommonJS:
const dat = require('dat.gui');
// ES6:
import * as dat from 'dat.gui';
const gui = new dat.GUI();

4、通过<script type="text/javascript" src="xxxx.js"></script>的方式xxx.js文件不会被打包。这样在开发过程中也方便，不然每次都需要打包库文件。我的破电脑每次打包速度都很慢。还是暂时放弃打包three.js等库文件吧，只打包自己用ES6编写的代码就好了。

据说可以配置 --hot 再进行文件修改，它会在再次修改文件的时候也修改打包好的文件，而不是重新打包一个完整的文件，从而提高速度。

5、安装babel来编译es6语法。

这样就可以把之前的three.js的代码。通过 es6 、 webpack 的方式打开了。

6、静态的html文件。我们把需要引入的库文件放在head中，把打包生成的bundle.js文件放在body中就好了。这样我们用浏览器打开html文件就可以看到我们的案例了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>node.js-es6-Webpack-three.js</title>
    <script src="./src/three.js"></script>
    <style>
        body{margin: 0;overflow: hidden;}
    </style>
</head>
<body>
   <script src="./dist/bundle.js"></script>
</body>
</html>

6、安装http-server。正常开发的案例都可以直接打开，但是有些我们需要服务器环境local host。方便快速浏览，可以安装一个http-server。启动服务就可以了默认但口号是8080。也可以通过命令修改端口。

http-server -p 8081

使用webpack-dev-server后打包的文件 bundle.js是在内存中的。磁盘里面没有，真的没有，找了好久。

因为开启webpack-dev-server之后是所谓的热更新，生成的文件都在内存中，方便实时查看效果，如果想得到生成的文件，就需要关闭webpack-dev-server，再使用webpack编译一次了。也许有其他方法。

"test": "echo \"Error: no test specified\" && exit 1",

"deve": "webpack --mode development",

"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"

// npm 命令

npm run deve //这个是打包编译

npm run dev //这个是开启webpack-dev-server 会自动刷新。

webpack编译的文件居然跑shi dist/main.js文件中，不是说好的release/bundle.js。眼睛迷糊的没看见，又坑我好久，坑我太年轻。

如何使用ES6开发Three.js项目

猜你喜欢