摘要：用初始化一下，就会为你创建一个，用来管理你的依赖包，命令配置。还是不清除的可以去我的上看一下，很水的一个项目，别喷我。
单纯的运行一段js逻辑的话就不需要构建测试项目，直接写个js，node命令行运行一下就可以了，但是往往阅读一段他人的源码想要自己测试一下就没办法这样子，因为别人会依赖模块，会操作浏览器dom等等，所以自己写一个测试小demo有时候就很有用处。
nodejs里面又没有什么dom元素，什么window全局对象，所以我们的代码最好运行在浏览器端，那么构造一个index.html是必不可少的，然后引入对应的js，这样就可以了？哪有这么简单。
npm init 初始化项目别人的代码里面依赖了一些模块，还用了ES6的语法，所以我们需要让我们的node环境支持ES6语法，那就需要引入babel。用npm init初始化一下，node就会为你创建一个package.json，用来管理你的依赖包，命令配置。
babel的配置npm install babel-register --save npm install babel-preset-env --save
然后通过
require("babel-register");
require("./test.js");
的方式来解决ES6的语法问题，但是你会发现浏览器连require都不支持，那是当然的，JavaScript里面从来没听说过require语法。所以我们需要用到构建工具把代码编译成浏览器可以识别的js。这里就要用到webpack来进行打包模块化。
webpack打包构建记好先全局安装webpack：
npm i webpack -g
然后我们就可以通过配置来对你的js进行打包了，下面是最简单的配置：
const path = require("path");
module.exports = {
// JavaScript 执行入口文件
entry: "./index.js",
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: "bundle.js",
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, "./dist"),
}
};
webpack的配置自行研究，推荐《深入浅出Webpack》。
运行
webpack --config webpack.config.js
就可以打包你的js了，目录就是当前目录的dist文件夹下。当然想要起作用index.html必须引入这个js。
使用webpack-dev-server起服务你是不是发现每次更改代码就需要打包一下，这样肯定很烦啊，所以利用webpack-dev-server在本地起一个服务，方便在你做出修改时刷新就可以看到变化。
我们构建server.js,像这样
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
stats: {
colors: true,
hash: false,
timings: true,
chunks: false,
chunkModules: false,
modules: false
}
});
server.listen(3040, "localhost", function(err, result) {
if (err) {
return console.log(err);
}
console.log("Listening at http://localhost:3040/");
});
之后运行node server.js就可以在本地3040端口七个服务，之后你想在index.html写什么东西自己看着吧，逻辑自然也可以运行。
还是不清除的可以去我的GitHub上看一下，很水的一个项目QuickBuild，别喷我。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108089.html
摘要：编写一个接口创建命名为根据实际情况修改创建类，内容如下启动主程序，使用等工具发起请求，可以看到页面返回编写单元测试用例打开的下的测试入口类。 简介 在您第1次接触和学习Spring框架的时候，是否因为其繁杂的配置而退却了？在你第n次使用Spring框架的时候，是否觉得一堆反复黏贴的配置有一些厌烦？那么您就不妨来试试使用Spring Boot来让你更易上手，更简单快捷地构建Spring应...
摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面（英语：command-li...
摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面（英语：command-li...
摘要：三部署架构说明这个方案仅适用于小公司敏捷项目团队联调测试环境的部署，同时也可以作为学习入门的，并不适用于有一定规模的生产环境。另外，建议把测试域名泛解析到部署这台服务的机器。模块配置部署脚本业务模块的配置基本是通过部署脚本来操作的。 项目地址： https://github.com/xiongwilee...基本特性： 快捷部署多人nginx+php的开发测试环境，也可以扩展构建其...
摘要：三部署架构说明这个方案仅适用于小公司敏捷项目团队联调测试环境的部署，同时也可以作为学习入门的，并不适用于有一定规模的生产环境。另外，建议把测试域名泛解析到部署这台服务的机器。模块配置部署脚本业务模块的配置基本是通过部署脚本来操作的。 项目地址： https://github.com/xiongwilee...基本特性： 快捷部署多人nginx+php的开发测试环境，也可以扩展构建其...
阅读 3384·2023-04-26 01:46
阅读 2904·2023-04-25 20:55
阅读 5470·2021-09-22 14:57
阅读 2973·2021-08-27 16:23
阅读 1710·2019-08-30 14:02
阅读 2061·2019-08-26 13:44
阅读 643·2019-08-26 12:08
阅读 2950·2019-08-26 11:47
