React build

先使用脚手架创建了2个 react 项目

sudo npm install -g create-react-app
create-react-app projecta
create-react-app projectb

在projectb中创建一个自己的 hello 模块

import React from 'react'

const HelloModule = (props) => {
    return (
        <div>
            <div>helloworld</div>
            <button>Helloworld Button</button>
        </div>
    );
}

export default HelloModule;

然后我们尝试使用 babel 来编译这个模块

先安装 babel cli 工具集

npm install --save-dev @babel/cli
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-react

package.json 中添加一个 scripts babel

babel 脚本会使用 “./node_modules/.bin/babel 把 src/components/Hello.js 编译成 hello.js

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "babel": "./node_modules/.bin/babel src/components/Hello.js --out-file hello.js"
  },

package.json 中添加 main,指向 hello.js

{
  "name": "projectb",
  "main": "hello.js",
  "version": "0.1.0",
  "private": true,
  ...
}

然后调用link

npm link

在projecta中

import Hello from 'projectb'

<Hello />
Send a Message