一个webapp工程创建入门

发布日期：2019-09-29 17:37:10

创建一个webapp工程可以使用下面的步骤。

安装nvm (可选，仅用来管理nodejs版本）
安装nodejs （可选，如果已经有的话）
创建工程目录
初识化工程
安装工程依赖。

一）安装nvm (参考https://github.com/nvm-sh/nvm/blob/master/README.md#system-version-of-node)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

如何上面出现connection refused.可以直接进入网页https://github.com/nvm-sh/nvm/blob/master/install.sh，把里面的内容copy出来放到install.sh中去，然后运行bash.

安装后重启一个terminal, 然后运行nvm ls-remote可以查看有哪些nodejs版本可以使用。

二）通过nvm安装nodejs

通过nvm安装nodejs比较方便

nvm install 10.16.3

三）创建工程目录

mkdir mywebApp
cd mywebApp

四）初始化工程（这里并不用vue-cli或reactjs-cli来快速建立其对应的工程。）

npm init -y

这将会生成一个package.json文件。

{                                                                                                                                                                                                               
  2   "name": "mywebApp",
  3   "version": "1.0.0",
  4   "description": "",
  5   "main": "index.js",
  6   "scripts": {
  7     "test": "echo \"Error: no test specified\" && exit 1"
  8   },
  9   "keywords": [],
 10   "author": "",
 11   "license": "ISC"
 12 }

五）安装工程依赖

5.1如果需要使用webpack的话，则可以（参考https://www.webpackjs.com/guides/getting-started/）

npm install webpack webpack-cli --save-dev

安装后可以在package.json文件中script部分添加如下，这样就可以更方便的使用webpack的不同模式，只要使用npm run watch 或start,deploy即可在不同场景下使用。

"scripts": {
    "watch":"webpack --mode development --watch",
    "start":"webpack --mode development",
    "deploy":"webpack --mode product"
  }

可以在webpack.config.js中配置entry和output

module.exports = {
  entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
    filename: 'index.bundle.js'
  }
｝

5.2 如果需要安装babel的话，可以（参考https://github.com/babel/babel-loader）

npm install -D babel-loader @babel/core @babel/preset-env

安装了babel后就可以将ES6的新特性编译转化为ES5的语法，从而支持更多的浏览器。需要在webpack.config.js中的module.exports中添加

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

5.3 通过npm install安装其他依赖包。在https://www.npmjs.com/ 中可以搜索各种第三方包。同时可以参考https://docs.npmjs.com/cli-documentation/关于如何使用npm.

一个webapp工程创建入门

发表评论