웹 테스트 프로젝트를 빠르게 구축하는 방법은 무엇입니까?

이 기사에서는 웹 테스트 프로젝트를 신속하게 구축하는 방법을 공유합니다. 내용이 매우 상세합니다. 구체적인 내용을 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

단순히 js 로직을 실행한다면 테스트 프로젝트를 빌드할 필요가 없습니다. 그냥 js를 작성하고 노드 명령줄에서 실행하면 됩니다. 그러나 종종 다른 사람의 소스를 읽을 때 그렇습니다. 코드를 작성하고 직접 테스트하고 싶지만 다른 사람들이 모듈을 사용하고 브라우저 돔을 조작하는 등의 작업을 수행할 수 있기 때문에 이를 수행할 수 없습니다. 따라서 작은 테스트 데모를 직접 작성하는 것이 때로는 매우 유용합니다.

nodejs에는 dom 요소나 창 전역 개체가 없으므로 우리 코드는 브라우저 측에서 실행하는 것이 가장 좋습니다. 따라서 index.html을 구성한 다음 해당 js를 도입하는 것이 필수적입니다. 충분합니까? 그렇게 간단하지 않습니다.

npm init 초기화 프로젝트

다른 사람들의 코드는 일부 모듈에 의존하고 ES6 구문을 사용하므로 우리 노드 환경이 ES6 구문을 지원하도록 만든 다음 babel을 도입해야 합니다. npm init로 초기화하면 노드는 종속성 패키지와 명령 구성을 관리할 수 있는 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을 설치해야 합니다. 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 --config webpack.config.js

그런 다음 구성을 통해 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/');
});

webpack을 직접 작성하고 "간단한 방법으로 Webpack 소개"를 권장합니다.

rrreee

를 실행하여 js를 패키징하세요. 디렉터리는 현재 디렉터리의 dist 폴더입니다. 물론 index.html이 작동하려면 이 js를 도입해야 합니다.

webpack-dev-server를 사용하여 서비스 시작

코드를 변경할 때마다 패키징해야 한다는 사실을 알게 된다면 매우 번거로울 수 있으므로 webpack-dev-server를 사용하여 로컬에서 서비스를 시작하세요. 쉽게 변경할 수 있습니다. 때때로 새로고침하여 변경사항을 확인하세요.
우리는 이렇게 server.js를 빌드합니다.

rrreee

그런 다음 node server.js를 실행하여 7개의 로컬 3040 포트를 제공합니다. 그러면 index.html에 작성하려는 내용이 표시되고 로직이 자연스럽게 실행됩니다. 관련 권장사항:

IE가 호환되지 않고 웹페이지를 열 수 없으면 어떻게 해야 하나요? Node.js 브라우저 비호환 문제 해결 팁

🎜🎜🎜

위 내용은 웹 테스트 프로젝트를 빠르게 구축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!