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

  1. 安装nvm (可选,仅用来管理nodejs版本)
  2. 安装nodejs (可选,如果已经有的话)
  3. 创建工程目录
  4. 初识化工程
  5. 安装工程依赖。

一)安装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

安装后重启一个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.

发表评论